JSFiddle - React, Tailwind, and code Playground

by basti1012

HTML

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>4 Col Portfolio - Start Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/4-col-portfolio.css" rel="stylesheet">

  </head>

  <body>
    <!-- Page Content -->
    <div class="container">

      <!-- Page Heading -->
      <h1 class="my-4">Portfolio
        <small>Unsere Projekte</small>
      </h1>

<div class="row">
 <div class="col-lg-3 col-md-4 col-sm-6 portfolio-item">
   <div class="card h-100">
            <a href="#"><img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/tillmann-verpackungen-referenz-esd-tray-luft-raumfahrt.jpg" onmouseover="this.src='http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca3.jpg'" onmouseout="this.src='http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/tillmann-verpackungen-referenz-esd-tray-luft-raumfahrt.jpg'" class="card-img-top" onclick="openModal();currentSlide(1)"></a>
   			<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">

    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca3.jpg" style="width:100%">
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca1.jpg">
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="http://www.tillmann-verpackungen.com/wp-content/uploads/2017/12/oeca6.jpg">
    </div>
    
    <div class="mySlides">
     <div...

CSS

/*!
 * Start Bootstrap - 4 Col Portfolio (https://startbootstrap.com/template-overviews/4-col-portfolio)
 * Copyright 2013-2017 Start Bootstrap
 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-4-col-portfolio/blob/master/LICENSE)
 */

body {
  padding-top: 54px;
}

@media (min-width: 992px) {
  body {
    padding-top: 56px;
  }
}

.portfolio-item {
  margin-bottom: 30px;
}

.pagination {
  margin-bottom: 30px;
}
 .row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to eachother */
.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 50px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

/* Hide the slides by default */
.mySlides {
  display: none;
  width:100%;
  height:auto;
  background:black;
}

.myslides img{
	width:70%;
 height:auto;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc)...