JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

</div>
    <div class="bildbox2">
        <div class="bild2">
            <span class="title2"> Text 2</span>
            <button class="konfigurieren-button2">Button 2</button>
            <div class="point2"></div>
        </div>
    </div>
    <div class="bildbox3">
        <div class="bild3">
            <span class="title3">Text 3</span>
            <button class="konfigurieren-button3">Button 3</button>
            <div class="point3"></div>
        </div>
    </div>
    <div class="bildbox4">
        <div class="bild4">
            <span class="title4"> Text 4</span>
            <button class="konfigurieren-button4">Button 4</button>
            <div class="point4"></div>
        </div>
    </div>
    <div class="bildbox5">
            <div class="bild5">
                <span class="title5"> Text 5</span>
                <button class="konfigurieren-button5">Button 5</button>
                <div class="point5"></div>
            </div>
        </div>
        <div class="bildbox6">
            <div class="textbox">
            <h3> header </h3>
            <p> paragraph
        </p>
        </div>
        </div>
        </div>

CSS

#flex-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: distribute;
        justify-content: space-around;
}
.bildbox1, 
.bildbox2, 
.bildbox3, 
.bildbox4, 
.bildbox5,
.bildbox6
{
    width: 100vw; 
margin-left: calc(50% - 50vw);
    height: 300px;
    overflow: hidden;
    text-align: center;
  }
  .bild1,
  .bild2,
  .bild3,
  .bild4,
  .bild5 {
    width: 100%;
    height: 100%;
    background-color: black; /* fallback color */
    background-position: center;
    background-size: cover;
    -webkit-transition: all .3s ease;
  }
  .bild1 {
    background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild2 {
    background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild3 {
    background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild4 {
    background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
.bild5 {
    background-image: url("//cdn.shopify.com/s/files/1/0031/3252/2611/files/selfie-413162_960_720_large.jpg?v=1549398130");
}
  .textbox {
      background-color: #F2F2F2;
      height: 100%;
      padding-top: 20%; 
      text-align: center;
  }
  .textbox p {
      color: darkgrey;
  }
.point1,
.point2,
.point3,
.point4,
.point5
{
width: 75px;
margin: auto;
position: absolute;
top: 10px;
left: 0;
bottom: 0;
right: 0;
height: 1px;
background: white;
  -webkit-transition: width .3s ease;
  -o-transition: width .3s ease;
  transition: width .3s ease;
  display: none;
}
  .konfigurieren-button1,
  .konfigurieren-button2,
  .konfigurieren-button3,
  .konfigurieren-button4,
  .konfigurieren-button5
  {
    background: #E30D27;
    color: white;
    padding: 0 10px;
    text-align: center;
   ...