JSFiddle - React, Tailwind, and code Playground

by bhupendra negi

HTML

<a class="play-link" href=""> Watch introduction video </a>

<div class="play-btn"></div>

CSS

.play-link::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:40px;
  height:40px;
  border-radius:50%;
  background-color:#0076ff
}

.play-link::after{
  content:"";
  position:absolute;
  left:16px;
  top:13px;
border-top:6px solid transparent;
border-bottom:6px  solid transparent;
 border-left:11px solid #fff
}
.play-link {
  position:relative;
  height:40px;
  line-height:40px;
  padding-left:55px;
  line-height:40px;
  text-decoration:none;
  display:inline-block;
  color:white
}

body {
  background-color:black
}

.play-btn {
  width:40px;
  height:40px;
  border-radius:50%
  
}