JSFiddle - React, Tailwind, and code Playground

by generalhenry

HTML

<div id="body">
    <div class="problem smallbox">
        <span class="problemNumber">1</span>
        <div class="problemText">
            <p>536</p>
            <p class="bottomLine"><span class="left">&ndash;</span>75</p>
        </div>
        <input type="text" />
    </div>
    <div class="problem smallbox">
        <span class="problemNumber">2</span>
        <div class="problemText">
            <p>5,280</p>
            <p class="bottomLine"><span class="left">+</span>1,735</p>
        </div>
        <input type="text" />
    </div>
    <div class="problem smallbox">
        <span class="problemNumber">3</span>
        <div class="problemText clear">
            <div class="frac">
                <span class="nom">
                    2
                </span>
                <span class="den">
                    8
                </span>
            </div>
            <span class="frac">+</span>
            <div class="frac">
                <span class="nom">
                    6
                </span>
                <span class="den">
                    8
                </span>
            </div>
            <span class="frac">=</span>
            <input type="text" class="small" />
            <div class="frac">
                <span class="nom">
                   <input type="text" class="small" />
                </span>
                <span class="den">
                   <input type="text" class="small" />
                </span>
            </div>
        </div>
        
    </div>
    <div class="problem smallbox">
        <span class="problemNumber">4</span>
    </div>
    <div class="problem smallbox">
        <span class="problemNumber">5</span>
    </div>
    <div class="problem smallbox">
        <span class="problemNumber">6</span>
    </div>
    <div class="problem smallbox">
        <span class="problemNumber">7</span>
    </div>
    <div class="problem smallbox">
        <span class="problemNumber">8</span>
    </div>
    <div...

CSS

#body {
  width:400px;   
}
.problem {
   float:left;   
}
.smallbox {
   height:94px;
   width:94px;
   border:1px solid black;
   padding: 2px; 
    border-radius:5px;
    margin:1px;
}
.problemNumber {
   text-align:center;
   border-radius: 5px 10px;
   background-color: blue;
   color:white;
   width:20px;
   float:left;
}
.problemText {
   float:left;
   text-align:right;
   min-width:70px; 
   padding:2px;
}
.bottomLine {
  padding-top:7px;
  border-bottom:1px solid black;   
}
.left {
   float:left;   
}
.smallbox input {
   height:25px; 
    width:90px;
   text-align:right;
    background-color:#ffe4b5;
    border-radius:7px;
}
div.frac { display:inline-block; font-size:.67em; position:relative; top:4px; }
.den, .nom { display: block;  width:100%; text-align:center }
.den {line-height:.67em;}
.nom { text-decoration: underline; } 
.nom input {
   border-bottom:1px solid black;   
}
.clear {
   clear:both;   
}
.smallbox .small {
  width:10px;   
  height:auto;
}