JSFiddle - React, Tailwind, and code Playground

by teewelk

HTML

<!-- 
  Bootstrap docs: c
-->
<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<link href="https://unpkg.com/[email protected]/dist/css/ionicons.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">


<div class="container">
  <div class="row">
    <div class="col">
      <h3>
        thanks for staying with us!
      </h3>
      <h4 style="text-transform: lowercase;">
        LEAVE US A REVIEW ON MULTIPLE CHANNELS TO EARN MARRIOTT REWARDS POINTS!
      </h4>
      <br>
      <textarea class="col-lg-12" id="textinfo">
        type your message here
      </textarea>

      <div class="container">
        <div class="row">


          <ul>
            <input type="checkbox" class="form-check-input" id="">
            <img height="24" width="24" color="692245" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/tripadvisor.svg" />


          </ul>

          <ul>
            <input type="checkbox" class="form-check-input" id="">
            <img height="20" width="20" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/facebook.svg" />
          </ul>

          <ul>
            <input type="checkbox" class="form-check-input" id="">
            <img height="24" width="24" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/yelp.svg" style="color: #00AF87 !important; " />
          </ul>

          <ul>
            <input type="checkbox" class="form-check-input" id="">
            <img height="24" width="24" src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/google.svg" />
          </ul>


          <ul>
            <button class="btn btn-residence-maroon">
         continue</button>
          </ul>



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

<div class="container">
  <div class="row">
    <div class="col">
      <h4>
        Earn Marriott Rewards Points For Every Review You Leave!
      </h4>
      <p>
        Earn 150 points for <b...

CSS

body {
  background-color: #fff;
}

p {
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 0.04em;
  text-transform: ;
  font-size: 20px;
}

h3 {
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h4 {
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

h5 {
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 2px;
  text-transform: uppercase;
}

textarea {
  font-family: 'Didact Gothic', sans-serif;
  letter-spacing: 2px;
  text-transform: italic;
}

.row {
  background: #ffffff;
  margin-top: 20px;
}

.col {
  padding: 10px;
  box-shadow: 1px 12px 40px 1px #363636;
}

.btn-residence-maroon {
  background-color: #692245;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-family: 'Didact Gothic', sans-serif;
}

.retrobold {
  background-color: ;
  padding: 4px 8px 8px 8px;
  color: #151823;
  text-transform: uppercase;
}