JSFiddle - React, Tailwind, and code Playground

by andy_h

HTML

<div class="cacce">
    
    <ul>
        <li><a href="#">Elkku</a></li>
        <li><a href="#">Kelkku</a></li>
        <li><a href="#">Eli</a></li>
        <li><a href="#">Kelkkis</a></li>
    </ul>
    
    <h1>Elenan Sivu</h1>
    
    <p>
        Kas näin Internet toimii!
    Donec ullamcorper nulla non metus auctor fringilla. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
    </p>

    <a class="cuva" href="#">Näytä kuvani</a>
    <figure>                
        <img src="http://distilleryimage6.s3.amazonaws.com/3942f0d6d05e11e1839c1231381b3106_7.jpg">
        <figcaption>
            Moi olen elena
        </figcaption>           
    </figure>
</div>

CSS

html{
    font-family:Helvetica;
    background:PeachPuff;
}
h1 {
    font:bold 30px/1.2 Helvetica;
    margin:0 0 20px 0;
}
p {
    color:#333;
    margin-bottom:15px;
}
.cacce{
    margin:20px;
}
ul {
    margin:10px 10px 10px 0;
}
ul li {
    display:inline;
    margin:0 10px 0 0;
}
figure{
    display:none;
    margin:0;
    font-size:12px;
}

JavaScript

//elkun sivu
$(".cuva").click(function(){

    $('figure').fadeToggle();
    
});