JSFiddle - React, Tailwind, and code Playground

by Abdul Ahmad

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class='card'>
  <!-- <div class='logo'>
    <img src='https://orig00.deviantart.net/0f07/f/2017/269/9/f/screen_shot_2017_09_26_at_11_37_14_am_by_duxfox-dbomphg.png' />
    Therapy<b>Hub</b>
  </div> -->
  <div class='text'>
    <div class='title'>
      Talk to a therapist online today
    </div>
    <div class='bullets'>
      <!-- <div class='bullets-title'>
        Text, video, and self-help features
      </div> -->
      <div class='bullet-items'>
      
        <div class='bullet-item'>
          <div class='icon'>
            <i class='fa fa-calendar-check-o'></i>
          </div>
          <div class='words'>
            No waiting for appointments
          </div>
        </div> <!-- bullet item -->
        
        <div class='bullet-item'>
          <div class='icon'>
            <i class='fa fa-comments-o'></i>
          </div>
          <div class='words'>
            Text, video, and audio
          </div>
        </div> <!-- bullet item -->
        
        <div class='bullet-item'>
          <div class='icon'>
            <i class='fa fa-pencil-square-o'></i>
          </div>
          <div class='words'>
            Personalized treatment plans and self-help features
          </div>
        </div> <!-- bullet item -->
        
        <div class='bullet-item'>
          <div class='icon'>
            <i class='fa fa-money'></i>
          </div>
          <div class='words'>
            More affordable than traditional therapy
          </div>
        </div> <!-- bullet item -->
      </div> <!-- bullet items -->
    </div><!-- bullets -->
    <div class='sign-up-free'>
      <div>
        Sign up and get <span class='green-text'>2 weeks free</span>
      </div> 
      <div>
        no credit card required
      </div>
    </div>
  </div><!-- text -->
</div>

SCSS

body {
  // background: black;
}

.card {
  width: 940px;
  min-height: 600px;
  margin: 50px auto;
  background: white;
  box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.4);
  border-radius: 5px;
  background-image: url(https://s3.us-east-2.amazonaws.com/temporary-th-photos/shutterstock_447793483.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
}

.logo {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 4px 10px;
  background: white;
  border-radius: 3px;
  border: 1px solid white;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4);
}

.logo img {
  width: 30px;
  height: auto;
  margin-right: 5px;
}

.text {
  position: absolute;
  top: 0px;
  right: -70px;
  width: 400px;
  height: 100%;
  box-sizing: border-box;
  padding: 50px 50px;
  background: linear-gradient(90deg, #0000002e, #0000006e);
  background: linear-gradient(#ffffff91, #ffffff);
  background: white;
  // background: rgba(0, 0, 0, 0.5);
  font-size: 30px;
  font-family: sans-serif;
  // color: white;
  // text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), 0 0 2px rgba(0, 0, 0, 0.1);
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 5px 3px 10px 0 rgba(0, 0, 0, 0.4);
}

.title {
  text-align: center;
  text-shadow: 0 1px 5px rgba(255, 255, 255, 0.8), 0 -1px 1px rgba(255, 255, 255, 0.2);
  color: #1ac390;
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
}

.bullets {
  // background: red;
  min-height: 10px;
  margin-top: 40px;
}

.green-text {
  color: #1ac390;
}

.bullets-title {
  font-size: 20px;
  text-align: center;
}

.bullet-item {
  margin: 0 auto;
  margin-top: 20px;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 300px;
}

.bullet-item:first-of-type {
  margin-top: 30px;
}

.bullet-item .icon {
  border: 2px solid #00b1ea;
  margin-right: 15px;
  padding: 13px;
  border-radius: 100%;
  display: flex;
 ...