JSFiddle - React, Tailwind, and code Playground

by joplomacedo

HTML

<div class="box">
    <div class="row titleRow">
        <h2>Call Notes</h2>
       <div class="searchBox"> 
           <label>
                <div class="inputWrapper">
                    <input class="input" type="search" placeholder="Search previous logs..." />
                </div>
            </label>
        </div>
    </div>
    
    <div class="row">
        <div class="threecol">
            <label>
                <b class="labelText">Call type</b>
                <div class="inputWrapper">
                    <select class="input">
                        <option>Info</option>
                        <option>Something</option>
                        <option>Other thing</option>
                    </select>
                </div>
            </label>
        </div>
        <div class="threecol">
            <label>
                <b class="labelText">Important</b>
                <div class="inputWrapper">
                    <select class="input">
                        <option>Info</option>
                        <option>Something</option>
                        <option>Other thing</option>
                   </select>
               </div>
            </label>
        </div>
        <div class="threecol">
            <label >
                <b class="labelText">Subject</b>
                <div class="inputWrapper">
                    <input class="input" type="text" />
                </div>
            </label>
        </div>
    </div> 
    
    <div class="row">
        <div class="threecol">
            <label >
                <b class="labelText">Phone</b>
                <div class="inputWrapper">
                    <input class="input" type="text" />
                </div>
            </label>
        </div>
        
        <div class="threecol">
            <label >
                <b class="labelText">Email</b>
                <div class="inputWrapper">
                    <input class="input" type="text" />
               ...

CSS

* {
    box-sizing: border-box;
}

body {
    font-family: helveticaneue;
    -webkit-font-smoothing: antialiased;
}

b {
    font-weight: normal;
}

select, input, textarea {
    vertical-align: top;
    border: 1px solid #ddd;
    -webkit-appearance: textfield;
    border-radius: 0;
    outline: none;
    font-size: 14px;
    color: #ccc;
}

input, textarea {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.09);
}

select {
    box-shadow: inset 0 -1px 3px rgba(0,0,0,0.09);
}

.row {
    padding: 18px 8px 16px 26px;
    border-bottom: 1px solid #ddd;
    box-shadow: 0 1px #fff;
}

.onecol,
.threecol {
    display: inline-block;
    padding-right: 10px;
}

.onecol {
    width: 99.6%;
}

.threecol {
    width: 33%;
    padding-right: 10px;
    display: inline-block;
    vertical-align: top;
}

.box {
    background: #f8f8f8;
}



.label {
    display: block;
}

.labelText {
    display: block;
    width: 80px;
    margin-bottom: 5px;
    font-size: 12px;
    color: #555;
}

.inputWrapper {

}

.input {
    padding: 6px;
    width: 100%;
    max-width: 100%;
}


}

input {
    -webkit-appearance: none;
}


.titleRow {
overflow: hidden;
padding-top: 27px;
padding-bottom: 21px;
background: #474747;
border-bottom: none;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.39), inset 0 -2px 2px rgba(0, 0, 0, 0.1);
}

h2{
float: left;
font-size: 24px;
line-height: 34px;
font-weight: bold;
letter-spacing: -0.05em;
color: #D1D1D1;
text-shadow: 0 1px rgba(5, 5, 5, 0.17);
}

.searchBox {
    width: 331px;
    float: right;
    margin-right: 13px;
    text-align: right;
    line-height: 34px;
}

.searchBox input {
background-color: rgba(0, 0, 0, 0.15);
border-radius: 17px;
border: 1px solid rgba(0, 0, 0, 0.13);
font-size: 12px;
padding: 5px 5px 6px;
width: 80%;
-webkit-transition: 0.3s;
vertical-align: baseline;
}

.searchBox input:focus {
background-color: rgba(236, 236, 236, 0.83);
border: 1px solid #3F3F3F;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.43);
}


textarea {
    min-height:...