JSFiddle - React, Tailwind, and code Playground

by Soviut

HTML

<h1>Event Rules</h1>

<div class="rule arrow-box">
  <header class="rule__header">
    <div class="rule-header">
      <h1 class="rule-header__name">Rule #1</h1>
    
      <div class="rule-header__controls">
        <button class="btn">
          Edit [v]
        </button>
      </div>
    </div>
  </header>

  <div class="rule__conditions arrow-box">
    <ul class="list-group">
      <li class="list-group__item">First Condition</li>
      <li class="list-group__item">Second Condition</li>
      <li class="list-group__item">Third Condition</li>
    </ul>
  </div>

  <div class="rule__actions">
    <ul class="list-group">
      <li class="list-group__item">First Action</li>
      <li class="list-group__item">Second Action</li>
      <li class="list-group__item">Third Action</li>
    </ul>
  </div>
</div>

<div class="rule">
  <header class="rule__header">
    <div class="rule-header">
      <h1 class="rule-header__name">Named Rule that Stops</h1>
    
      <div class="rule-header__controls">
        <button class="btn">
          Edit [v]
        </button>
      </div>
    </div>
  </header>

  <div class="rule__conditions arrow-box">
    <ul class="list-group">
      <li class="list-group__item">First Condition</li>
    </ul>
  </div>

  <div class="rule__actions">
    <ul class="list-group">
      <li class="list-group__item">First Action</li>
      <li class="list-group__item">Second Action</li>
      <li class="list-group__item list-group__item--stop">Then Stop</li>
    </ul>
  </div>
</div>

<div class="rule">
  <header class="rule__header">
    <div class="rule-header">
      <h1 class="rule-header__name">Another Named Rule that Stops</h1>
    
      <div class="rule-header__controls">
        <button class="btn">
          Edit [v]
        </button>
      </div>
    </div>
  </header>

  <div class="rule__conditions arrow-box">
    <ul class="list-group">
      <li class="list-group__item">First Condition</li>
      <li class="list-group__item">Second...

SCSS

body {
  margin: 30px;
  
  font-family: arial, helvetica, san-serif;
}

.rule {
  margin-bottom: 10px;

  border: solid 1px #CCC;
  border-radius: 4px;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2);

  &__header {
    border-bottom: solid 1px #CCC;
    background: #EEE;
  }
  
  &__conditions {
    padding-bottom: 10px;
    
    border-bottom: solid 1px #CCC;
  }
  
  &__actions {
    padding-top: 10px;
  }
}

.rule-header {
  display: flex;  
  
  &__name {
    padding: 10px;
    flex-grow: 1;
    margin: 0;

    font-size: 1em;
    font-weight: bold;
  }
  
  &__controls {
    padding: 5px;
  }
}

.list-group {
  list-style: none outside;
  padding: 0;
  margin: 0;
  
  &__item {
    padding: 10px;

    + * {
      border-top: dotted 1px #CCC;
    }
    
    &--stop {
      background: #990000;
      color: #FFF;
      border-radius: 0 0 4px 4px
    }
  }
}

.btn {
  padding: 5px 10px;

  border: solid 1px #CCC;
  border-radius: 4px;
  font-size: 1em;
  background: #FFF;
}

.arrow-box {
  position: relative;
}

.arrow-box:after, .arrow-box:before {
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}

.arrow-box:after {
	border-color: rgba(255, 255, 255, 0);
	border-top-color: #FFF;
	border-width: 10px;
	margin-left: -10px;
}
.arrow-box:before {
	border-color: rgba(204, 204, 204, 0);
	border-top-color: #CCC;
	border-width: 11px;
	margin-left: -11px;
}