JSFiddle - React, Tailwind, and code Playground

by Mariya_Korotkova

HTML

<div class="wrapper">
  <div class="figure">
  Hello
  </div>

  <div class="arrow">
  </div>
</div>


<div class="wrapper">
  <div>
    <div class="triangle-top">
    </div>

    <div class="triangle-bottom">
    </div>
  </div>

  <div class="block">
    Hello
  </div>

  <div class="arrow">
  </div>
</div>

<!--  -->
<div class="wrapper">
  <div>
    <div class="triangle-top1">
    </div>

    <div class="triangle-bottom1">
    </div>
  </div>

  <div class="block1">
    Hello
  </div>

  <div class="arrow1">
  </div>
</div>

CSS

.figure {
  width: 0; 
  height: 0;
  border-width: 25px 50px 25px 25px;
  border-style: solid;
  border-color: blue blue blue transparent;
  
  color: white;  
}

.arrow {
  width: 0; 
  height: 0;
  border-top: 25px solid transparent;
  border-left: 25px solid #D0D4DC;
  border-bottom: 25px solid transparent;
}

.wrapper {
  display: flex; 
  margin-top: 15px;
}

.triangle-top {
width: 0; 
height: 0;
border-top: 25px solid #82C6BE;
border-left: 25px solid transparent;
}

.triangle-bottom {
width: 0; 
height: 0;
border-bottom: 25px solid #CDE5E1;
border-left: 25px solid transparent;
}

.block {
  background-color: blue;
  height: 50px;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 10px;
}


.arrow1 {
  width: 0; 
  height: 0;
  border-top: 20px solid transparent;
  border-left: 16px solid #D0D4DC;
  border-bottom: 20px solid transparent;
}

.triangle-top1 {
width: 0; 
height: 0;
border-top: 20px solid red;
border-left: 16px solid transparent;
}

.triangle-bottom1 {
width: 0; 
height: 0;
border-bottom: 20px solid green;
border-left: 16px solid transparent;
}

.block1 {
  background-color: blue;
  height: 40px;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 10px;
}