JSFiddle - React, Tailwind, and code Playground

by MarmiK

HTML

<div class="square" font=10px>
    <p>Jabali Renewable Solutions (JBS),LLC</p>
</div>
<div id="wrapper">
    <img class="A" src="download.jpg" alt="Solar Panels" />
    <img class="B" src="wind.jpg" alt="Windmills" />
    <img class="C" src="biomass.jpg" alt="Biomass" />
    <img class="D" src="renewable.jpg" alt="Renewable Energy" />
</div>
<div id="bottom">
    <hr />
    <p>Contact:*********@gmail.com</p>
</div>

CSS

p {
    color:#f5f5dc;
    font-size:50px;
    text-align: center;
    margin-top:20px;
}
body {
    background-color:#fffacd;
    font-size:100%;
    min-width:800px;
    padding:0;
    margin:0;
}
.square {
    height: 100px;
    width: 100%;
    position:relative;
    border: 2px solid black;
    border-radius: 5px;
    background-color:#0066cc;
    font-size:1.0em;
}
#wrapper {
    width:100%;
    margin-top: 40px;
    margin-bottom: 40px;
    position:relative;
}
.A, .B, .C, .D {
    width:300px;
    height:200px;
    float:left;
    border:1px solid black;
    margin-right:10px;
    margin-bottom:40px;
    position:relative;
}
.D {
    width:270px;
}
#bottom {
    clear:both
}
#bottom p {
    color:black;
    font-size:15px;
}