JSFiddle - React, Tailwind, and code Playground

by Ivin Raj S

HTML

<section>
  <h1 class="one">
    <span>Heading Number One</span>
  </h1>
    <div class="row">
	<div class="circle" ></div>
	<div class="circle"></div>
	<div class="circle" ></div>
</div>
<button type="button">Click Me!</button>
</section>

CSS

section{
  margin: 0 auto;
  width: 600px;
  text-align: center;
}
  h1 {
    position: relative;
//margin-top: 20px;
  }
  
  h1.one {
    margin-top: 0;
  }
  
  h1.one:before {
    content: "";
    display: block;
    border: solid 1px black;
    width: 100%;
    height: 150px;
    position: absolute;
    top: 50%;
    z-index: 1;
      border-radius:5px;
  }
  
  h1.one span {
    background: #fff;
    padding: 0 20px;
    position: relative;
    z-index: 5;
  }

/* method 2*/

button
{
  padding:8px;
  background-color: gray
  color:white;
  border: 2px solid;
    border-radius: 15px;
  margin-top:2px;
  position: relative;
    z-index: 5;
  
}
.circle
{
	border:4px solid red;
	height: 70px;
	width: 70px;
	border-radius: 40px;
   position:relative;
    margin:10px auto;
   display:inline-block;
}

.row
{
	
	height: 100px;
	width: 700px;
	margin: 10px;
    text-align:center;
    position:relative;
}