JSFiddle - React, Tailwind, and code Playground

by mitoman

HTML

<div class="panel">
  <div class="card">
    <img src="https://shrani.si/f/19/ki/2NGACPkG/personalimage.png">
    <h2 class="heading">Personal</h2>
    <p class="descriptionOne">Custom Domains</p>
    <p class="descriptionTwo">Sleeps after 30 min of inactivity</p>
    <h1 class="price">Free</h1>
    <button class="signUp">Sign Up</button>
  </div>
    <div class="card">
    <img src="https://shrani.si/f/2S/uE/22ZXU9hF/teamimage.png">
    <h2 class="heading">Enterprise</h2>
    <p class="descriptionOne">Never Sleeps</p>
    <p class="descriptionTwo">Multiple workers for more powerful apps</p>
    <h1 class="price">$150</h1>
    <button class="signUp">Free Trial</button>
  </div>
    <div class="card">
    <img src="https://shrani.si/f/2s/hp/2Sha4fb3/enterpriseimage.png">
    <h2 class="heading">Enterprise</h2>
    <p class="descriptionOne">Dedicated</p>
    <p class="descriptionTwo">Simple Horizontal Scalability</p>
    <h1 class="price">$400</h1>
    <button class="signUp">Free Trial</button>
  </div>
</div>

CSS

html {
  box-sizing: border-box;
}

body {
  background-color: rgb(84, 159, 255);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  height: 1200px;
}

img {
  width: 40px;
}

.panel {
  display: flex;
  flex-direction: row;
  border: 1px solid black;
  justify-content: space-around;
  align-items: flex-start;
  text-align: center;
}

.card {
  border: 1px solid white;

}




}

@media (max-width: 480px) {
  .panel {
    flex-direction: column;
    width: 100%;
    align-items: center;
    height: 100%;
  }
}

img, .heading, .descriptionOne, .descriptionTwo, .price, .signUp {
  border: 1px solid red;
}