JSFiddle - React, Tailwind, and code Playground

by fredd man

HTML

<input type="text" id="url" placeholder="or paste a youtube link here">
    <button id="start">Play video</button>

CSS

element.style {
}
#url {
    display: block;
    width: 76%;
    height: 38px;
    margin: 10px auto;
    padding: 0;
    border: 1px solid rgba(151, 151, 151, .25);
    border-radius: 3px;
    background: transparent;
    font-size: 14px;
    font-weight: regular;
    text-align: center;
    color: #7F7F7F;
    line-height: 14px;
    outline: none;
    -webkit-transition: width 300ms ease-out;
}element.style {
}
#start {
    position: relative;
    visibility: hidden;
    width: auto;
    height: auto;
    margin: 2px 0 0 0;
    padding: 0 0 0 24px;
    border: none;
    background: url('data:image/svg+xml;utf8,<svg version="1.1" width="100px" height="100px" vi…5.5 Z M27.2 54.5 L49.7 41 L27.2 27.5 L27.2 54.5 Z" fill="#3AA7F2"/></svg>') no-repeat;
    background-image: url('data:image/svg+xml;utf8,<svg version="1.1" width="100px" height="100px" vi…5.5 Z M27.2 54.5 L49.7 41 L27.2 27.5 L27.2 54.5 Z" fill="#3AA7F2"/></svg>');
    background-position-x: 0%;
    background-position-y: 3px;
    background-size: 21px;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial;
    background-origin: initial;
    background-clip: initial;
    background-color: initial;
    background-size: 21px;
    background-position: left 3px;
    font-size: 14px;
    font-weight: 300;
    color: #3AA7F2;
    cursor: pointer;
    outline: none;
    opacity: 1;
    -webkit-transition: opacity 500ms ease-in, margin-top 500ms ease-in;
    z-index: 2;
}