JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="frame stripe-4 Absolute-Center">
    <div class="arrowCenter">
    <span class="glyphicon glyphicon-share-alt flip arrowSelect"></span>
    <div class="textSelect">Select a Row
        </div>
</div>

CSS

.frame{
    border: 3px dashed #777;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    height:840px;
    width:690px;
    text-align:left;
    padding:7%;
}
.textSelect{
    color:#c2c2c2;
    font-size:30px;
    font-family:'Century Gothic';
    font-weight:700;
}
.arrowSelect{
    font-size:90px;
    color:#c2c2c2;
}
.stripe-4 {
  color: white;
  background: repeating-linear-gradient(
    -55deg,
    #f9f9f9,
    #f9f9f9 4px,
    #fff 4px,
    #fff 30px
  );
}
.flip {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}
.Absolute-Center {
  bottom: 0;
  height: 98%;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 96%;
}
.arrowCenter {
  bottom: 0;
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  width: 200px;
    text-align: center;
}
#perspect-menu_inner{
z-index: 9999;
}
.alertContent {
  z-index: 9999;
}