JSFiddle - React, Tailwind, and code Playground

by SineMetu

HTML

<div id="outer_container">
       
            <div id="div_right">
            <div class="border">
                <div class="content_head"><h1>Our Mission</h1></div>
               <p> 
                  content 
                <br> content 
                <br> content
                </p>
            </div>
           </div>
         
            <div id="div_left">
              <div class="border">
                <div class="content_head"><h1>Contact Us</h1></div>
           
                <p>
                 content 
                <br> content
                </p>
            </div>
         
      </div>

            <div id="div_bottom">
                <div class="content_head"><h1>Current Projects</h1></div>
                <p> 
                content
                </p>
            </div>
         </div>

</div>
</div>

CSS

.content_head{
    width:100%;
    height:35px;
    margin:0;
    padding:0;
    border-top-left-radius:2px;
    border-top-right-radius:2px;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-color:rgb(153,153,153);
    text-shadow: 0px -1px 0px rgba(000,000,000,0),
    0px 1px 0px rgba(255,255,255,0.3);
    background: rgb(147,206,222); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(147,206,222,1) 0%, rgba(117,189,209,1) 41%, rgba(73,165,191,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(147,206,222,1)), color-stop(41%,rgba(117,189,209,1)), color-stop(100%,rgba(73,165,191,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(147,206,222,1) 0%,rgba(117,189,209,1) 41%,rgba(73,165,191,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93cede', endColorstr='#49a5bf',GradientType=0 ); /* IE6-9 */
    
    
}
.border{
    border-top-left-radius:4px;
    border-top-right-radius:4px;
    border-style:solid;
    border-width:1px;
    border-color:rgb(153,153,153);
    height:auto;
    
    
    
}



#outer_container{
    margin:0;
    width:100%;
    margin-top:4%;
    min-width:320px;
    height:100%;

    
        
}
#div_left{
    float:left;
    width:48%;
    height:100%;
    margin-left:4%;
    padding-bottom:0px;
    background: rgb(238,238,238); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(238,238,238,1) 0%, rgba(204,204,204,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left...