JSFiddle - React, Tailwind, and code Playground

by Pangur Ban

HTML

<div class="action">
  <div class="action_inner">
    <div class="action_content">
      <div class="action_icon"></div>
      <div class="action_title">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, veniam, debitis.</div>
    </div>
  </div>
</div>

SCSS

body {
  font-family: sans-serif;
}

.action {
  width: 250px;
  
  &_inner {
    border-left: 6px solid #607d8b;
  }
  
  &_content {
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-left: 0;
  }
  
  &_icon {
    float: left;
    width: 30px;
    height: 30px;
    margin: 0 10px 5px 0;
    background: rgba(0, 0, 0, 0.1);
  }
  
  &_title {
    font-size: 13px;
    line-height: 1.3em;
  }
}