JSFiddle - React, Tailwind, and code Playground

by seankoole

HTML

<h2 class="h2"></h2>




<div class="image-left text-right">
  
  <figure>
    <img src="" alt="">
  </figure>
  
  <div>
    <h2 class="font-primary font-size-h2">Quisque placerat facilisis</h2>
    
    <p class="font-secondary font-size-body-base">Unam incolunt Belgae, aliam Aquitani, tertiam. Quis aute iure reprehenderit in voluptate velit esse. Quisque placerat facilisis egestas cillum dolore.</p>
  </div>
  
</div>


<form action="">
  
  <label for="">
    Name
  </label>
  <input class="font-size-input-base" type="text">
  
  
</form>

CSS

h1, h2, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
  font-size: 1em;
}

.h1 {
  
  font-size: 72px;
}

.h2 {
  font-size: 64px;
}

.h3 {
 font-size: 48px;
}

@media all and (max-width: 600px) {

  .h1-mobile {
    font-size: 30px;
  }

  .h2-mobile {
    font-size: 20px;
  }

  .h3-mobile {
    font-size: 10px;
  }


}