JSFiddle - React, Tailwind, and code Playground

by Baliga

HTML

<div class="buy-coffee-wrapper">
<div class="container">
                <div class="grid">
                    <div class="cell packaging1-wrapper">
                     <img src="https://images.homedepot-static.com/productImages/34d24daf-6677-4afc-97d1-830497bbff92/svn/home-basics-cookie-jars-cj10439-64_1000.jpg" class="responsive-image coffee-cookieDough">

                        <h5 class="coffee-name">Cookie Dough</h5>
                        <h6 class="coffee-price">£2.49</h6>
                    </div>

                    <div class="cell packaging2-wrapper">
                        <img src="https://images.homedepot-static.com/productImages/34d24daf-6677-4afc-97d1-830497bbff92/svn/home-basics-cookie-jars-cj10439-64_1000.jpg" class="responsive-image coffee-almond">

                        <h5 class="coffee-name">Amaretto Almond</h5>
                        <h6 class="coffee-price">£2.49</h6>
                    </div>

                    <div class="cell packaging2-wrapper">
                        <img src="https://images.homedepot-static.com/productImages/34d24daf-6677-4afc-97d1-830497bbff92/svn/home-basics-cookie-jars-cj10439-64_1000.jpg" class="responsive-image coffee-vanilla">

                        <h5 class="coffee-name">Very Vanilla</h5>
                        <h6 class="coffee-price">£2.49</h6>
                    </div>

                </div> 
                        </div>   
                                               </div>

CSS

/* body{
  background-color: brown
} */
.buy-coffee-wrapper {

margin-top: 50px;
background-color: rgb(34, 25, 25);

}

.grid{
    display: flex;
  flex-direction: row;
  align-items: center; 
}
.cell{
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.enjoy-home {

text-align: center;
padding-top: 25px;
color:#fff;
font-family: 'Lora', sans-serif;
font-weight: normal;

}

.buy-coffee {

/* margin-top: 20px; */
text-align: center;
color: #fff;
font-family: 'Multi', sans-serif;

}


.coffee-almond,
.coffee-cookieDough,
.coffee-vanilla {

width: 50%;
/* margin-left: 75px; */
margin-top: 50px;
}

.coffee-almond:hover,
.coffee-cookieDough:hover,
.coffee-vanilla:hover{

border: 1px solid rgb(255, 255, 255);
padding: 10;

}

.coffee-name, 
.coffee-price {

text-align: center;
margin: 10px 0;
color: #fff;
font-size: 18px;
font-family: 'Lora', sans-serif;
}