JSFiddle - React, Tailwind, and code Playground

by aldomatic

HTML

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8"/>
            <title>MedHost Demo</title>
        </head>
        <body>
        
            
            <div id="modWrap">
                <header>
                    <a href="#">Cancel</a>
                    <h1>Ordering Provider</h1>
                </header>
                <div id="innerContent">
                    <div id="searchBar">
                        <input type="text" placeholder="Search Staff" />
                    </div>
                    <h2>On Duty</h2>
                    <div id="onDutyList">
                        <ul>
                            <li>Barbara, Gates <span>Internal Medicine</span></li>                                
                            <li>Barbara, Gates <span>Internal Medicine</span></li>
                            <li>Barbara, Gates <span>Internal Medicine</span></li>
                            <li>Barbara, Gates <span>Internal Medicine</span></li>
                        </ul>
                        
                    </div>
                </div>
                
            </div> 
        </body>
    </html>

CSS

body{padding:20px;}
#modWrap{width:380px;background-color:darkblue;padding:0 5px 5px 5px;border-radius:5px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#19134f), color-stop(0%,#9d9baa), color-stop(3%,#565f6b), color-stop(9%,#19134f)); /* Chrome,Safari4+ */
}
header{color:#fff;font-family:arial;font-size:20px;text-align:center;padding:10px 0;height:30px;}
h1{padding-right:50px;}
header a:link{
 float:left;
font-size:13px;
font-weight:bold;
 border:solid #333 1px;
color:#fff;
padding:8px 11px;
text-decoration:none;
border-radius:5px;    
}
h2{font-family:arial; font-size:14px;font-weight:bold;padding:0 0 5px 10px;}
#innerContent{height:300px;
width:380px;
 background-color:#fff;   
 border-radius:5px;  
}
#searchBar{
    width:360px;
    padding:10px;  
    }
    #searchBar input{
width:340px;
padding:10px;
 border-radius:15px;
border:solid #333 1px;
 -webkit-box-shadow: inset 0 0 5px #333;
   box-shadow:inset 0 0 5px #333;    
}
#onDutyList{
    -webkit-box-shadow: inset 0 0 10px #33;
   box-shadow:inset 0 0 10px #333;
 border:solid #333 1px;
height:190px;
width:340px; 
margin: 0 auto;
border-radius:5px;
padding:10px;    
}
#onDutyList ul li{
 font-family:arial; font-weight:bold;
padding:10px 0; 
border-bottom:solid #ccc 1px;    
}
#onDutyList ul li:last-child{
 border:none;   
}
#onDutyList ul li span{
 float:right;
color:blue;    
}