JSFiddle - React, Tailwind, and code Playground

by klodoma

HTML

<h1>Title 1</h1>
<div class="parent">
  <div class="bg-gradient-blue-rl box box-left">
    <h3>Title 1</h3>
  </div>
  <div class="bg-gradient-blue-rl box box-right">
    <h3>Title 2</h3>
  </div>
</div>

<div class="fusion-title  circle title fusion-sep-none fusion-title-size-three bg-gradient-blue-rl fusion-border-below-title" style="margin-top:10px;margin-bottom:10px;"><h3 class="title-heading-left">Step 1 – Select Your Video</h3></div>


<div id="maincontainer">
  <div class="leftcolumn circle" data-foo="22"></div>
  <div class="contentwrapper bg-gradient-blue-rl">
    <h3>Title 1</h3>
  </div>
</div>

<h1>Title 1</h1>
<hr>

  <div class="contentwrapper bg-gradient-blue-rl">
    <h3>Title 1</h3>
  </div>

CSS

h1:before {
  content: "2";
  counter-increment: section;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 10px solid blue;
  border-radius: 100%;
  text-align: center;
}

.parent {
  display: inline-block;
  width: 100%;
}

.box-left {
  width: 100px;
}

.box-right {
  width: calc(100% - 100px);
}

.box {
  display: inline-block;
}

.bg-gradient-blue-rl {
  background: linear-gradient(270deg, #39A9E0 0%, #053853 100%);
}

#maincontainer {
  /* width: 100%; */
}

.circle::before {
  content: attr(data-foo) " ";
  counter-increment: section;
  line-height: 40px;
  display: inline-block;
  width: 40px;
  height: 40px;
  margin: 0 20px 0 0;
  border: 10px solid #053853;
  border-radius: 100%;
  text-align: center;
  font-size:20px;
}

.leftcolumn {
  float: left;
  display: inline-block;
  width: 60px;
  /* background: blue; */
}

.contentwrapper {
  float: left;
  width: -moz-calc(100% - 80px);
  width: -webkit-calc(100% - 80px);
  width: calc(100% - 80px);
}