JSFiddle - React, Tailwind, and code Playground

by nsatija

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Froala Design Blocks - Skeleton</title>
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    <link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-design-blocks/2.0.0/css/froala_blocks.min.css">
  </head>
 
  <body>
<section class="fdb-block">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-10 col-sm-6 col-md-5 col-lg-4 m-auto pb-5 pb-md-0">
        <img alt="image" class="img-fluid rounded-0" src="./imgs/draws/iphone-hand.svg">
      </div>

      <div class="col-12 ml-md-auto col-md-7 col-lg-6 pb-5 pb-md-0">
        <img alt="image" class="fdb-icon" src="./imgs/icons/gift.svg">
        <h1>Design Blocks</h1>
        <p class="lead">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts</p>
        <p class="mt-4">
          <a class="btn btn-secondary" href="https://www.froala.com">Download</a>
          <a class="btn btn-dark ml-3" href="https://www.froala.com">Register</a>
        </p>
      </div>
    </div>
  </div>
</section>
 
  </body>
</html>