JSFiddle - React, Tailwind, and code Playground

by maxious

HTML

<body>
    <div id="animWrap"> <a class="dialogBubble" id="dialogBox1" href="#dialogBox2">
            <div class="dialogName">Politimester Tor Mikkelsen:</div>God morgen, Agnes! Sa bra at du kunne komme pa sa kort varsel. Du har blitt innkalt direkte fra kongen for a utfore dette spesialoppdraget. Det er en terroristgruppe som er ute etter a smitte mennesker med et dodelig virus og vi vil at du skal stoppe dem!</a>
 <a class="dialogBubble" id="dialogBox2" href="#dialogBox3">
            <div class="dialogName">Agnes:</div>Klart jeg kan stoppe dem, politimester! Hva vet vi om viruset, og hvor finner vi terroristene?</a>
 <a class="dialogBubble" id="dialogBox3" href="#dialogBox4">
            <div class="dialogName">Politimester Tor Mikkelsen:</div>Det er et virus vi aldri har v?rt borte i for, men det vi vet er at de som blir smittet far fryktelige konsekvenser og dor i lopet av sv?rt kort tid. Fra de forrige ofrene har vi oppdaget av organene blir spist fra innsiden av en uidentifiserbar skapning. Det som er positivt er at vi har lokalisert tre steder viruset kan befinne seg da det gir ut sv?rt mye radioaktiv aktivitet som vi har sport opp. De tre stedene er Oslo S, Radhuset og Ulleval sykehus. Lykke til, Agnes!</a>
 <a class="dialogBubble" id="dialogBox4" href="nextpage.html">
            <div class="dialogName">Agnes:</div>Da setter jeg i gang!</a>

    </div>
</body>

CSS

#animWrap {
    width: 960px;
    height: 660px;
    margin: auto;
    position: relative;
    background-color: rgb(128, 0, 0);
}
[id^="dialogBox"] {
    top: -200px;
    opacity: 0;
}
[id^="dialogBox"]:target {
    top: 50%;
    opacity: 1;
}
.dialogBubble {
    display: block;
    width: 500px;
    padding: 10px;
    
    position: absolute;
    left: 50%;
    /*half of total height */
    margin-top: -50px;
    /*half of total width */
    margin-left: -260px;

    font-family: Arial;
    font-size: 12px;
    color: white;
    text-align: center;
    text-decoration: none;
    
    background-color: #99958c;
    border: 1px solid white;
    border-radius: 10px;
    
    -webkit-transition: top 1s ease-out, opacity 0.3s ease-out;
    transition: top 1s ease-out, opacity 0.3s ease-out;
}
.dialogName {
    color: #800000;
    font-weight: bold;
}