<!--
  Author: @codepeek
  License: MIT
  Tags: #buttons #css #interface #opensource #codepeek
-->
<label class="film-input">
  <span>
    SCENE 12
  </span>
  <input type="text" placeholder="Name the scene">
  <i>
    ▶
  </i>
</label>

/*
 * Author: @codepeek
 * License: MIT
 * Tags: #buttons #css #interface #opensource #codepeek
 */

.film-input{display:flex;align-items:center;width:276px;overflow:hidden;border-radius:4px;background:repeating-linear-gradient(90deg,#232327 0 8px,#f2ead7 9px 13px,#232327 14px 22px);padding:5px;color:#28282b;font-family:Arial}.film-input>span,.film-input input,.film-input i{position:relative;z-index:1}.film-input>span{padding:11px 8px;background:#25252a;color:#f2ead7;font-size:8px;font-weight:800;letter-spacing:1px}.film-input input{flex:1;min-width:0;margin:0 4px;padding:11px 8px;border:0;outline:0;background:#f7f1e1;color:#363331;font-size:14px}.film-input i{padding:10px;background:#e4b85b;color:#25252a;font-style:normal}.film-input:focus-within{box-shadow:0 0 0 3px #e4b85b}