JSFiddle - React, Tailwind, and code Playground

by prashusuri

HTML

<div id="main_links">
  <div class="main_btn"><a href="about.html"><img src="images/about_btn.png" width="174" height="464" alt="Contact Us" /></a></div>
  <div class="main_btn"><a href="products.html"><img src="images/products_btn.png" width="174" height="464" alt="Products" /></a></div>
  <div class="main_btn"><a href="prom.html"><img src="images/prom_btn.png" width="174" height="464" alt="Prom" /></a></div>
  <div class="main_btn"><a href="weddings.html"><img src="images/weddings_btn.png" width="174" height="464" alt="Wedding Gallery" /></a></div>
  <div class="main_btn"><a href="receptions.html"><img src="images/receptions_btn.png" width="174" height="464" alt="Receptions" /></a></div>
  <div class="main_btn"><a href="flowers.html"><img src="images/flowers_btn.png" width="174" height="464" alt="Flowers" /></a></div>
</div>

CSS

.main_btn   {
display:inline-block;
height: 100px;
width: auto;
background-image: url(../images/btn_reflection.png);
background-repeat: no-repeat;
background-position: center bottom; 
margin-right: 30px;
}

#main_links {
height: auto;
max-width: 500px;
margin-right: auto;
margin-left: auto;
border: 1px solid red;
}