JSFiddle - React, Tailwind, and code Playground

HTML

<link href='http://fonts.googleapis.com/css?family=Sorts+Mill+Goudy' rel='stylesheet' type='text/css'> 
<div id="ex1">
    
    <h1><span class="step">2</span></h1>
    <p>Applicake chocolate cake carrot cake sweet roll icing marshmallow powder cake. Biscuit caramels 
</div>

CSS

article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
.step {
    border-radius: 50%;
    font-size: 1em;
    line-height: 2em;
    padding-top: 0.1em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    border: 4px solid gray;
}
  body{
    margin:0; 
    padding:24px 0 0 0; 
    line-height:1.5; 
    background:#fff;
    font-family: 'Sorts Mill Goudy', serif;
}
  
  h1 {
    border-top: 1px solid black;
    margin:23px 0 0;
    text-align:center;
    padding:0;
    height:30px;
}

  h1 span {
    position: relative;
    top: -24px;
}
  
  div {
    margin: 0; 
    padding:50px; 
    background:white;
}
  
  #ex1 p, #ex2 p{
    margin:0 0 12px; 
}
  
  #ex2 h1{
    border-color:#444; 
    color:#444;
}
  #ex2, #ex2 span{
    background:#eee;
}
  
  #ex3, #ex3 span{
    background:url(http://kachibito.net/sample/Alice/demos/common/ios-linen.jpg) center top;
}
  #ex3 h1, #ex3 p {   
    border-color:#eee; 
    color:#eee;
}
  #ex3 span{
    background-position:center 6px;
}