JSFiddle - React, Tailwind, and code Playground

HTML

<body>

		<div class="vizitka"> <!-- pozicija vizitk -->

			<div class="infotocka"> <!--infotocka vizitka-->
				<img src="img/sampslogo.png" alt="samps" />
				<h1>Infotočka</h1>
				<p>Strokovni članki</p>
				<a href="#" data-reveal-id="infotocka">več...</a>
			</div> <!--end infotocka vizitka-->

			<div class="svetovanje"> <!--svetovanje vizitka-->
				<img src="img/sampslogo.png" alt="samps" />
				<h1>Svetovanje</h1>
				<p>
					Strokovnjaki družbe Samps smo soustvarjalci poslovnih strategij v podjetjih ter pripravljalci dokumentacije za prijave na razpise.
				</p>

				<a href="#" data-reveal-id="svetovanje">več...</a>
			</div> <!--end svetovanje vizitka-->

			<div class="ocenjevanje"> <!--ocenjevanje vizitka-->
				<img src="img/sampslogo.png" alt="samps" />
				<h1>Ocenjevanje</h1>
				<p>
					V družbi Samps se zavedamo, da se lahko le strokovno usposobljeni ljudje lotevajo najzahtevnejših nalog...
				</p>

				<a href="#" data-reveal-id="ocenjevanje">več...</a>
			</div><!-- end ocenjevanje vizitka-->

			<div class="onas"> <!--onas vizitka-->
				<img src="img/sampslogo.png" alt="samps" />
				<h1>O nas</h1>	
				<p>V svojem skoraj dvajsetletnem delovanju se je družba za svetovanje in cenitve Samps d.o.o. izkazala kot zanesljiv partner pri cenitvah...</p>

				<a href="#" data-reveal-id="onas">več...</a>

			</div> <!--end onas vizitka-->

	
		</div> <!--end vizitka-->

		<!--Začetek modal-->
		<div id="onas" class="reveal-modal"> <!--začetek onas modal-->
			<h1>O nas</h1>
				<div id="nav" class="clearfix">
                    <a href="#headline1">1</a>
                    <a href="#headline2">2</a>
                    <a href="#headline3">3</a>
                    <a href="#headline4">4</a>
                </div>
				<br>
				<p>
					V svojem skoraj dvajsetletnem delovanju se je družba za svetovanje in cenitve Samps d.o.o. izkazala kot zanesljiv partner pri cenitvah vrednosti strojev in opreme, nepremičnin in podjetij, reševanju problemov...

CSS

body{
    background:url(../img/ozadje.png);
}

img{
    width: 346px;
    height: 66px;
}

h3{
    display: block;
    font-size: 18px;
    color: green;
    font-family: arial;
}

strong{
    font-weight: bolder;
        font-family: arial;
}

ul{
    list-style-type: circle;
    display: block;
    padding-left: 5%;
        font-family: arial;
}

.vizitka{
    text-align: left;
    position:relative;
    top:50%;
    margin: 250px auto 0 auto; 
    width: 346px; 
    font-family: arial;
}

.vizitka-inner {
    position: relative;
    left: 50%;
    top: 50%;
}

.glavna{
    width:346px;
    height:192px;   
    background: white;
    position: absolute;
    box-shadow: 5px 5px 13px #181818; 
    transform: rotate(0deg);
    -ms-transform: rotate(0deg); /* IE 9 */
   -webkit-transform: rotate(0deg); /* Safari and Chrome */
    font-family: arial;
/}

.glavna p{
    font-family: arial;
    font-size: 12px;
    margin-left: 200px;
    margin-bottom: 4px;
    line-height: 70%;
}

.onas{
    width:346px;
    height:192px;   
    background: white;
    position: absolute;
    box-shadow: 5px 5px 13px #181818; 
    transform: rotate(10deg);
    -ms-transform: rotate(10deg); /* IE 9 */
    -webkit-transform: rotate(10deg); /* Safari and Chrome */
        font-family: arial;
}

.onas h1{
    margin-left: 25px;
    color: green;
    margin-bottom: -13px;
        font-family: arial;
}

.onas p, .onas a{
    font-family: arial;
    font-size: 12px;
    margin-left: 200px;
    margin-bottom: 4px;
    line-height: 100%;
    text-decoration: none;
        font-family: arial;
}

.ocenjevanje{
    width:346px;
    height:192px;   
    background: white;
    bottom:-190px; /*here*/
    position: absolute;
    box-shadow: 5px 5px 13px #181818;  
    transform: rotate(-5deg);
    -ms-transform: rotate(-5deg); /* IE 9 */
     -webkit-transform: rotate(-5deg); /* Safari and Chrome */
         font-family: arial;
}

.ocenjevanje h1{
    margin-left: 25px;
    color: green;
   ...