JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<main>
    <div class="sheet">
        <div class="character-name">Character Name</div>
        <div class="scores">
            <div class="score">
                <label for="strength">Strength</label>
                <input type="text" name="strength" placeholder="20">
                <input type="text" name="strength-bonus" placeholder="+10">
            </div>
            <div class="score">
                <label for="dexterity">Dexterity</label>
                <input type="text" name="dexterity" placeholder="20">
                <input type="text" name="dexterity-bonus" placeholder="+10">
            </div>
            <div class="score">
                <label for="constitution">Constitution</label>
                <input type="text" name="constitution" placeholder="20">
                <input type="text" name="constitution-bonus" placeholder="+10">
            </div>
            <div class="score">
                <label for="intelligence">Intelligence</label>
                <input type="text" name="intelligence" placeholder="20">
                <input type="text" name="intelligence-bonus" placeholder="+10">
            </div>
            <div class="score">
                <label for="wisdom">Wisdom</label>
                <input type="text" name="wisdom" placeholder="20">
                <input type="text" name="wisdom-bonus" placeholder="+10">
            </div>
            <div class="score">
                <label for="charisma">Charisma</label>
                <input type="text" name="charisma" placeholder="20">
                <input type="text" name="charisma-bonus" placeholder="+10">
            </div>

        </div>
        <div class="passive">passive</div>
        <div class="inspiration">inspiration</div>
        <div class="proficiency">proficiency</div>
        <div class="saving-throws">saving-throws</div>
        <div class="skills">skills</div>
        <div class="languages">languages</div>
        <div class="armor">armor</div>
   ...

SCSS

@import url('https://fonts.googleapis.com/css?family=Rambla:400,700&subset=latin-ext');

:root {
    --gutter: 1em;
    box-sizing: border-box;
}

html,
body,
main,
.sheet {
    height: 100%;
    margin: 0;
    font-family: Rambla;
}

input {
    background: rgba(255, 100, 100, .25);
    border: 0;
    display: block;
    font-family: Rambla;
    max-width: 100%;
}

.sheet {
    display: grid;
    grid-template-columns: 8.75vw 2fr 3fr 3fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    grid-gap: var(--gutter);
    grid-auto-flow: column;
    padding: var(--gutter);
}


.sheet > div {
    background-color: lightblue;
}

.character-name {
    grid-column: 1 / 5;
}

.scores {
    grid-column: 1;
    grid-row: 2 / 7;
}

.passive {
    grid-column: 1 / 3;
    grid-row: 7;
}

.skills {
    grid-column: 2;
    grid-row: 5 / 7;
}

.languages {
    grid-column: 1 / 3;
}

.armor {
    grid-row: 2 / 6;
}

.equipment {
    grid-row: 7 / 9;
}

.personality {
    grid-row: 2 / 6;
}

.features {
    grid-row: 6 / 9;
}

.score {
    background: transparent url(https://i.imgur.com/hNJQyiL.png) center/cover no-repeat;
    height: 10.2777vw;
    margin-bottom: var(--gutter);

    label {
        text-transform: uppercase;
        font-weight: 700;
        font-size: 1.125vw;
        text-align: center;
        display: block;
        padding-top: 8px;
    }
    
    input {
        font-size: 2em;
        line-height: 1.5;
        text-align: center;
    }
    input:last-child {
        font-size: 1.5em;
        line-height: 1.25;
    }
}