JSFiddle - React, Tailwind, and code Playground

by SpiceLab

HTML

<header>
  <nav>
    <ul class="clearfix">
      <li class="home"><a href="Startseite.html">Cosima | Graphic Design</a></li>
      <li class="about"><a href="about.html" class="">Über mich</a></li>
      <li class="contact"><a href="Kontakt.html">Kontakt</a></li>
    </ul>
  </nav>
</header>

<main>  
  <ul class="clearfix">  
    <li>
      <a href="Detailseite.html">
        <img class="eins" src= "http://previews.123rf.com/images/karakotsya/karakotsya1501/karakotsya150100285/35795633-Seidenhalstuch-oder-Taschentuch-quadratisches-Muster-Design-in-der-ukrainischen-karakoko-Stil-f-r-de-Lizenzfreie-Bilder.jpg">
        <div class="outer"><h1 class="ontop">Pro Karton Salzstreuer</h1></div>
      </a>
    </li>

    <li>
      <a href="we.html">
        <img class="zwei" 
        src="http://previews.123rf.com/images/karakotsya/karakotsya1501/karakotsya150100285/35795633-Seidenhalstuch-oder-Taschentuch-quadratisches-Muster-Design-in-der-ukrainischen-karakoko-Stil-f-r-de-Lizenzfreie-Bilder.jpg">
        <div class="outer"><h1 class="ontop">Migrantinnen Geschäftsbericht</h1></div>
      </a>
    </li> 

    <li>
      <a href="we.html">
        <img class="drei"
        src="http://previews.123rf.com/images/karakotsya/karakotsya1501/karakotsya150100285/35795633-Seidenhalstuch-oder-Taschentuch-quadratisches-Muster-Design-in-der-ukrainischen-karakoko-Stil-f-r-de-Lizenzfreie-Bilder.jpg">
        <div class="outer"><h1 class="ontop">Hot Air</h1></div>
      </a>
    </li>

    <li>
      <a href="we.html">
        <img class="vier"
        src="http://previews.123rf.com/images/karakotsya/karakotsya1501/karakotsya150100285/35795633-Seidenhalstuch-oder-Taschentuch-quadratisches-Muster-Design-in-der-ukrainischen-karakoko-Stil-f-r-de-Lizenzfreie-Bilder.jpg">
        <div class="outer"><h1 class="ontop">Genuss Guide</h1></div>
      </a>
    </li>

    <li>
      <a href="we.html">
        <img class="sechs"
       ...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
/* global */
html,body {
	margin:0;
  padding:0;
	background-color:white
}
ul {
  list-style:none;
  padding:0;
  margin:0
}

/* nav */
nav ul {  
	text-align:right;
}
nav ul li {
	display:inline-block;
	font-weight:700;
	padding:25px 0;
	margin-bottom: 1%;
}
nav ul li.home {
	float:left;
	margin-left:10.5%;
	border-bottom:4px solid;
	border-color: rgba(50, 30, 227, 1);
	padding-bottom: 5px;
}
nav ul li.contact {
	margin-right: 10.5%;
	padding-left: 2%;
}
nav ul li a {
	color:black;
	font-family:"Open Sans";
	font-size:16px;
	text-decoration:none;
}
nav ul li a:hover {
	border-bottom:4px solid;
	border-color: rgba(50, 30, 227, 0.5);
	padding-bottom: 5px;
}

/* main */
main ul li {
  float:left;
  position:relative;
}
main li {
overflow: hidden;
}
main ul {
	margin: 3% 10% 0 10%;
}
main ul li img {
	display:block;
	width:100%;
	padding:3%; 
  box-sizing:border-box;
}
main ul li a .outer {
	transition: opacity 0.5s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease 0.5s;
	-ms-transition: all ease 0.5s;
	transition: all ease 0.5s;
}
/* hover text */
main li:hover .outer {
	-webkit-transition: all ease 0.7s;
	-moz-transition: all ease 0.7s;
	-o-transition: all ease 0.7s;
	-ms-transition: all ease 0.7s;
	transition: all ease 0.5s;
  position:absolute;
  top:0;
  width:100%;
  text-align:center;
  height:100%;
  background:rgba(50, 30, 227, 0.6);
}
main li:hover .outer {
	-webkit-transition: all ease 0.7s;
	-moz-transition: all ease 0.7s;
	-o-transition: all ease 0.7s;
	-ms-transition: all ease 0.7s;
	transition: all ease 0.5s;
}
h1 {
	color: white;
	text-align: center;
	width: 70%;
	position:absolute; 
	top:50%; 
	height:3em; 
	margin-top:-1.5em;
	font: 18px "Open Sans";
	letter-spacing: 0.2em;
	padding-left: 15%;
	padding-right: 15%;
	transition: opacity 0.5s;
	-webkit-transition: all ease 0.5s;
	-moz-transition: all ease 0.5s;
	-o-transition: all ease...