JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<button class="explore">
    <div class="explore-cube">
        <svg xmlns="https://www.w3.org/2000/svg" width="11.585" height="9.592" viewBox="0 0 11.585 9.592">
            <path id="Wordmark" d="M84.849,64.273l-2.9-4.8,2.9-4.795h5.79l2.9,4.795-2.9,4.8Z" transform="translate(-81.953 -54.682)" fill="#9a2328"/>
        </svg>
        <svg xmlns="https://www.w3.org/2000/svg" width="22.378" height="18.56" viewBox="0 0 22.378 18.56">
          <path id="Wordmark" d="M87.255,72.242l-5.3-8.782,5.3-8.779h10.6l5.308,8.779-5.308,8.782Z" transform="translate(-81.369 -54.182)" fill="none" stroke="#d4d0cf" stroke-width="1" opacity="0.7"/>
        </svg>
    </div>
    <div class="explore-text">
        <span>
            Explore more
        </span>
        <div class="explore-text-body">
            <div>Explore more</div>
            <div>Explore more</div>
        </div>
    </div>
</button>

CSS

body {
    background: black;
}
* {
    box-sizing: border-box;
}
button.explore {
    margin: 100px;
    border: 1px solid red;
    background: none;
    font-size: 20px;
    color: white;
    outline: none;
    position: relative;
    padding: 0;
    cursor: pointer;
}
button.explore div.explore-cube {
    width: 21.21px;
    height: 17.56px;
    position: relative;
    vertical-align: middle;
    display: inline-block;
}
button.explore div.explore-cube svg {
    position: absolute;
}
button.explore div.explore-cube svg:nth-child(1){
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(0deg);
}
button.explore div.explore-cube svg:nth-child(2){
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) rotate(0deg);
}
button.explore div.explore-text {
    vertical-align: middle;
    display: inline-block;
    /* overflow: hidden; */
    position: relative;
}
button.explore div.explore-text span{
    text-transform: uppercase;
    display: block;
    visibility: hidden;
}
button.explore div.explore-text div.explore-text-body {
    position: absolute;
    top: 0;
    left: 0;
    text-transform: uppercase;
}