JSFiddle - React, Tailwind, and code Playground

by james0n

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<div class="cont">
  <div class="icon">

    <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-building fa-stack-1x fa-inverse"></i>
</span>
  </div>


  <div class="details">

    <button type="button" class="btn btn-primary">Reset</button>

    <div class="title">Alarm description</div>
    <div class="title2">West 123
      <i class="fa fa-ban"></i>
      <i class="fa fa-bullhorn"></i>
      <i class="fa fa-bolt"></i>



    </div>

    <div class="subtitle">block 12345 So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows.</div>

    <h1>
      Header 1
    </h1>
    <div class="subtitle">
      So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows.</div>
    <h2>
      Header 2
    </h2>
    <div>

      So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows.
    </div>

    <h3>
      Header 3
    </h3>
    So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows.
    <h4>
      Header 4
    </h4>
    So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows. So wonderful to be here, yes it is, let's see multiple rows.

  </div>


</div>

CSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600');
html,
body {
  font-family: "Open Sans";
  font-weight: 300;
}

.block-icon {
  float: left;
  padding: 9px;
  background-color: #ccc;
}

.block-text {
  float: left;
  padding: 7px;
  background-color: #eee;
}

.title {
  font-weight: 400;
  color: #c00;
}

.title2 {
  color: #090;
}

.title2 i {
  padding-left:1em;
}

.subtitle {
  font-weight: 300;
  font-size: 0.9em;
}

.cont {
  display: flex;
  align-items: stretch;
  border: 1px solid #ccc;
}

.cont>* {
  padding: 1.2em;
}

.icon {
  background-color: #bb9;
}

.details {}

h1,
h2,
h3,
h4,
h5 {
  
}

.btn-primary {
  float:right;
}