JSFiddle - React, Tailwind, and code Playground

by oduska

HTML

<div class="card">
    <div class="card__title">
        <span>Objects</span>
    </div>
    <div class="card__body">
        <button></button>
        <input type="text">
        <button>Pattern</button>
        <button>Results</button>
    </div>
</div>

SCSS

@font-face {
    font-family: 'cubicfive10regular';
    src: url('//h.eh.to/fonts/cubicfive10-webfont.woff2') format('woff2'),
         url('//h.eh.to/fonts/cubicfive10-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cubicfive11italic';
    src: url('//h.eh.to/fonts/cubicfive11-webfont.woff2') format('woff2'),
         url('//h.eh.to/fonts/cubicfive11-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cubicfive12bold';
    src: url('//h.eh.to/fonts/cubicfive12-webfont.woff2') format('woff2'),
         url('//h.eh.to/fonts/cubicfive12-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'cubicfive18boldexpanded';
    src: url('//h.eh.to/fonts/cubicfive18-webfont.woff2') format('woff2'),
         url('//h.eh.to/fonts/cubicfive18-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background: #505050;
    font-family: 'cubicfive12bold';
}

.card {
    border: 1px solid #191919;
    background-color: #323232;
    border-radius: 3px;
    position: relative;
    
    &::before {
        content: '';
        position: absolute;
        left: 0px;
        top: 0;
        width: calc(100% - 2px);
        height: calc(100% - 2px);
        border: 1px solid #fff;
        border-radius: 2px;
        opacity: 0.11;
    }
}

.card__title {
    background-color: #464646;
    color: #fff;
}