JSFiddle - React, Tailwind, and code Playground

by nayanakalkur

HTML

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

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

<div class="rightArrow">
</div>

<div class="leftArrow">
</div>

<div class="circle">
</div>

<div class="rectangle">
  <span class="text">testing</span>
</div>

<div class="footer">
</div>

CSS

.arrow-down {
  width: 0px; 
  height: 0px; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-up {
  width: 0px;
  height: 0px;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 20px solid red;
}

.rightArrow {
  width: 0px;
  height: 0px;
  border-left: 20px solid red;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
}

.circle {
  height: 20px;
  width: 20px;
  background-color: blue;
  border-radius: 50%;
}

.rectangle {
  height: 20px;
  width: 100px;
  background-color: yellow;
}

.text {
  font-size: 7vw;
  color: orange;
}


.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: green;
  height: 6vh;
}