JSFiddle - React, Tailwind, and code Playground

by nndd

HTML

<script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script>
<fb:like href="https://www.facebook.com/pages/Notebank-Notatki-AWF/825487707528839" show_faces="true" width="450"></fb:like>

<div id="tilebox">
    <div id="tile1">Ogłoszenie 1</div>
    <div id="hile1">Tekst ogłoszenia testowego nr 1. Tu można zamieścić informację lub ogłoszenie.</div>
    <div id="tile2">Ogłoszenie 2</div>
    <div id="hile2">Tekst ogłoszenia testowego nr 2. Tu można zamieścić informację lub ogłoszenie.
        <br>druga linijka
        <br>trzeba linijka i testowy obrazek poniżej:
        <br>
        <img src="http://i.imgur.com/GNkFgjI.png" />
    </div>
</div>

CSS

#tilebox {
    text-align: center;
    justify-content: center;
    border: 1px solid #000000;
}
#tile1 {
    height: 150px;
    width: 150px;
    background-color: #FFDD44;
    border: 1px solid #FFCC33;
    display:inline-flex;
    padding: 25px;
    margin: 10px;
    font-size: 1.2em;
    text-align: center;
    justify-content: center;
}
#hile1 {
    display: block;
    position: fixed;
    background-color: rgba(204, 204, 204, 0.97);
    border-radius: 40px;
    border: 1px solid #AAAAAA;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    
    right:-100%;
    top:5%;
    min-height:100px;
    max-height:80%;
    max-width:70%;
    padding:40px;
    text-align:center;
}
#tile1:hover + #hile1 {
    right:0;
    transition-delay:3s;
}
#hile1:hover {
    display: block;
}
/* --------------------------------------- */
 #tile2 {
    height: 150px;
    width: 150px;
    background-color: #FFDD44;
    border: 1px solid #FFCC33;
    display:inline-flex;
    padding: 25px;
    margin: 10px;
    font-size: 1.2em;
    text-align: center;
    justify-content: center;
}
#hile2 {
    display: none;
    position: fixed;
    background-color: rgba(204, 204, 204, 0.97);
    border-radius: 40px;
    border: 1px solid #AAAAAA;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    left:10%;
    right:10%;
    top:5%;
    min-height:100px;
    max-height:80%;
    max-width:70%;
    padding:40px;
    text-align:center;
}
#tile2:hover + #hile2 {
    display: block;
}
#hile2:hover {
    display: block;
}