JSFiddle - React, Tailwind, and code Playground

by David McCormack

HTML

<div id="bigbox">
    <div id="box1">
    <div id="innerbox1">
		
                        <div id="box-image">
                            <a href="course.html">
                                <p id="image-text">
                                    Image text</p></a>
                        </div>
  
    
        <div id="box2">
    <div id="innerbox2">
        
   
        
       
    
                      <div id="box2">
    <div id="innerbox3">
                            
                            
                            
                             <div id="box-image2">
                            <a href="blog.html">
                                <p id="image-text2">
                                    Image text</p></a>
                               
                             </div>
        <div id="box4">
            <div id="innerbox4">
               <div id="bluebox">
                </div></div>
    </div>
    </div>

CSS

#bigbox{
    min-width:100%;
    height:auto;
}

#box1 {
    
    width: 45%;
    height: 300px;
    
}

#innerbox1 {
    float:left;
    width: 100%;
    height: 300px;
    outline: 1px solid;
    
}
#box2 {
    float:right;
    width: 45%;
    height: 600px;
    
}

#innerbox2 {
    width: 100%;
    height: 300px;
    outline: 1px solid;
    
}

#box3 {
    width: 100%;
    height: 300px;
}

#innerbox3 {
    float:left;
    width: 50%;
    height: 300px;
    outline: 1px solid;
    
}



#box4 {
    width: 45%;
    float:right;
    height:300px;
}

 #innerbox4 {
    
    width: 50%;
    height: 300px;
    outline: 1px solid;
    }



#bluebox {
    width:100%;
    height:200px;
    background-color:blue;
}


#box-image {
 
    background-image: url('../images/box1.jpg');
    background-position: left top;
    background-size: cover;
    background-repeat:no-repeat;
    cursor: pointer;
    min-width: 45%;
    height: 200px;   
    border-radius: 25px;
    border: 6px solid #404040;
    
}

#image-text {
    color:#fff;
    text-decoration:none;
    text-shadow: 2px 2px 4px #000000;
    font-size: 64px;
    font-weight: bold;
    text-align:center;
    line-height: 200px;
}

#box-image2 {
   
    background-image: url('../images/rug.jpg');
    background-position: left top;
    background-size: cover;
    background-repeat:no-repeat;
    cursor: pointer;
    min-width: 90%;
    height: 200px;   
   border-radius: 25px;
    border: 6px solid #404040;
    
}
#image-text2 {
   
    color:#fff;
    text-shadow: 2px 2px 4px #000000;
    font-size: 64px;
    font-weight: bold;
    text-align:center;
    line-height: 200px;
}