JSFiddle - React, Tailwind, and code Playground

by annndrewww

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
   <section class="index">
        <div class="wrap">
            <div class="index__content">
                <h2 class="index__title">Subscription index</h2>
                <small class="index__subtitle">A daily dataset to keep you up to date on <br> subscription market trends and what's happening <br> in your vertical.</small>
                <a href="#!" class="index__link">Learn more</a>
            </div>
        </div>
    </section>
</body>
</html>

CSS

.wrap {
  max-width: 900px;
  margin: 0 auto;
}

.index__content {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.index__title {
  font-family: 'DM Sans' sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 50px;
  line-height: 57px;  
  color: #19191B;
}

.index__subtitle {
  font-family: 'Mulish' sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 30px;
  color: #696871;
}

.index__link {
  font-family: 'DM Sans' sans-serif;
  font-style: normal;
  font-weight: 600;
  font-size: 17px;
  text-decoration: none;
  
}