JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>find it</title>
    </head>
    
    <body>
        <div>
            <h1>Finde den Fehler!</h1>
            
            <div id="original"></div>
            
            <div id="findit">
                <a href="#"></a>
                <a href="#"></a>
                
                <span id="true">Richtig!</span>
                <span id="false">Falsch! Nochmal..</span>
            </div>
        </div>
    </body>
</html>

CSS

* {
    margin: 0 ;
    padding: 0 ;
    border: 0 none ;
    font-family: "Haettenschweiler", sans-serif ;
}

html, body {
    width: 100% ;
    height: 100% ;
}

body > div {
    padding: 5px ;
}

div h1 {
    font-size: 2em ;
    padding-left: 108px;
}

div div {
    float: left ;
    margin-right: 2px ;
    width: 200px ;
    height: 200px ;
}

#original {
    background-image: url( 'http://img.xrmb2.net/images/454637.png' ) ;
}

#findit {
    position: relative ;
    background-image: url( 'http://img.xrmb2.net/images/873548.png' ) ;
}

div a {
    opacity: 0 ;
    outline-style: none ;
    text-decoration: none ;
    text-transform: uppercase ;
    color: #000 ;
}

div a:first-child {
    display: block ;
    width: 200px ;
    height: 200px ;
}

div a + a {
    position: absolute ;
    top: 100px ;
    left: 15px ;
    width: 20px ;
    height: 20px ;
    border: 5px solid lightgreen ;
    border-radius: 15px ;
}

div span {
    position: absolute ;
    opacity: 0 ;
    right: 10px ;
    font-size: 1.5em ;
}

div a:first-child:visited ~ #false,
div a:first-child:active ~ #false,
div a:first-child:focus ~ #false,
div a + a:visited ~ #true,
div a + a:active ~ #true,
div a + a:focus ~ #true,
div a + a:visited,
div a + a:active,
div a + a:focus {
    opacity: 1 ;
}