JSFiddle - React, Tailwind, and code Playground

by Arjun Muthalagu

HTML

<div class="carousal">
        <div class="inline-block"></div>
        <div class="arrow-block">
            <div class="arrow left"> < </div>
            <div class="arrow right"> > </div>
        </div>
    </div>

CSS

/* line 14, ../scss/carousal.scss */
.carousal {
  width: 300px;
  height: 300px;
  background: url("../Images/PH350*350.png");
  box-sizing: content-box;
  z-index: -1;
}
/* line 20, ../scss/carousal.scss */
.carousal .inline-block {
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}
/* line 21, ../scss/carousal.scss */
.carousal .arrow-block {
  display: inline-block;
  vertical-align: middle;
  height: 20px;
  width: 300px;
  box-sizing: content-box;
}
/* line 28, ../scss/carousal.scss */
.carousal .arrow {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  box-sizing: content-box;
}
/* line 29, ../scss/carousal.scss */
.carousal .clear {
  float: none;
}
/* line 30, ../scss/carousal.scss */
.carousal .left {
  float: left;
}
/* line 31, ../scss/carousal.scss */
.carousal .right {
  float: right;
}

/* line 2, ../scss/main.scss */
body {
  width: 90%;
  margin: auto;
}