JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">

<div class="card">
  <h1>Card Example</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisi sapien, facilisis vel lorem convallis, eleifend scelerisque nisi. Mauris vel tincidunt neque, malesuada sodales ipsum.</p> Integer tortor mauris, tincidunt vel egestas id, blandit ac arcu. Suspendisse
    potenti. Nulla condimentum nibh non augue posuere dictum. Duis tincidunt ornare ex at ultrices. Aliquam lobortis sodales turpis, eget lacinia ligula commodo in. Nulla interdum condimentum eros ac ultrices. Nunc blandit arcu sed neque fringilla varius.
    <p>Etiam non sodales quam, a hendrerit quam. Integer venenatis quam ut elementum convallis. Aliquam erat volutpat.</p>
</div>

CSS

body {
  background: #3a3e44;
  color: #ddd;
  font-family: 'Source Sans Pro', sans-serif;
}

h1 {
  margin: 0.2em 0;
  padding: 0;
  font-weight: 300;
}

.card {
  margin: 1em;
  background: #282828;
  border: 1px solid #282828;
  padding: 1.42857em;
  box-shadow: 10px 10px 30px -9px rgba(0, 0, 0, .4);
  transition: box-shadow 1s;
}

.card:hover {
  box-shadow: 10px 10px 30px -9px rgba(0, 0, 0, .75);
}