JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<div class="about_area" id="about">
<div class="container">
    <div class="row">
        <div class="col-md-12 sec_headding text-center">
            <!-- <h1>
                <span></span><?php the_title(); ?><span></span>
            </h1> -->
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-12 aboutbox">
                <div class="about_content">
                    <h3 class="about_header">RED DELA CRUZ</h3>
                    <hr align="center"/>
                    <div id="one">One</div> 
<div id="two">Two</div> 
<div id="three">Three</div>
                    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
                    <p class="lead">Based on some testing I did about a year ago, I found no reliable way to get a load event when changing the .src of an image from one value to another. As such, I had to resort to loading a new image and replacing the one I had with the new one when the new image was loaded. That code has been running successfully in several hundred web sites (it's used by a slideshow) for about a year now so I know it works.
                    Based on some testing I did about a year ago, I found no reliable way to get a load event when changing the .src of an image from one value to another. As such, I had to resort to loading a new image and replacing the one I had with the new one when the new image was loaded. That code has been running successfully in several hundred web sites (it's used by a slideshow) for about a year now so I know it works.
                    Based on some testing I did about a year ago, I found no reliable way to get a load event when changing the .src of an image from one value to another. As such, I had to resort to loading a new image and replacing the one I had with the new one when the new image was loaded. That code has been running successfully in several hundred web sites (it's used by a slideshow) for about a year now so...

CSS

bxslider img{
    width:100%;
}
.about_area{
    padding-bottom:105px;
    background-color: #b0c4de;
    background-image: url('http://img.photobucket.com/albums/v298/Decinoge/bg2_img.png');
}

.about_area .bx-wrapper .bx-viewport{
    margin-bottom: 20px;
}

.aboutbox {
    background-color: #000000;
    opacity: 0.6;
    position: relative;

}

.about_content {
    color: #FFFFFF;
}

.about_header {
    text-align: center;
    font-size: 33px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #FFFFFF;
    margin: 1em 0;
    padding: 0;
    /*width: 820px;*/
    width: 60%;
    margin: 0 auto;
}

#one, #two, #three { width: 33.3%; }
#one, #two { float: left; }
#three { float: right; clear: none; }

#one,  #three {
width: 250px;
min-height: 150px;
margin-top:-73px;
border: 4px solid gold;
background:red;
/*to reduce float drop issues in IE*/
word-wrap: break-word;
   
}
 #two {
     margin-top:-35px;
width: 150px;
min-height: 50px;
margin-bottom:45px;
border: 4px solid gold;
background:#C2DAD7;
/*to reduce float drop issues in IE*/
word-wrap: break-word;
     margin-left:420px;
     position:fixed;
}
p{
     margin-top:-175px;
    position:fixed;
}