JSFiddle - React, Tailwind, and code Playground

by CBroe

HTML

<ul>
    <li>
        <label for="c1" tabindex="0">select</label><a href="#s">Select Image:</a>

    </li>
    <li>
        <label for="c2" tabindex="0">select</label> <a href="#t1">Lorem ipsum</a>

    </li>
    <li>
        <label for="c3" tabindex="0">select</label> <a href="#t2">dolor sit</a>

    </li>
    <li>
        <label for="c4" tabindex="0">select</label> <a href="#t3">ahmet</a>

    </li>
    <li>
        <label for="c5" tabindex="0">select</label><a href="#t4">adsfgsdg sgsgsfgsfdgsdafg</a>

    </li>
    <li>
        <label for="c6" tabindex="0">select</label> <a href="#t5">asdfadsfadf</a>

    </li>
</ul>
<input type="radio" id="c1" name="c">
<img id="t1" src="http://lorempixel.com/500/500?foo">
<input type="radio" id="c2" name="c">
<img id="t2" src="http://lorempixel.com/500/500?bar">
<input type="radio" id="c3" name="c">
<img id="t3" src="http://lorempixel.com/500/500?baz">
<input type="radio" id="c4" name="c">
<img id="t4" src="http://lorempixel.com/500/500?sdfd">

CSS

html, body, ul, li {
    margin:0;
    padding:0;
    list-style:none;
}
body {
}
img {
    display:block;
    width:100%;
    height:auto;
    max-height:20px;
    border-top:1px solid red;
}
ul {
    position:fixed;
    top:10px;
    left:10px;
    background:#fff;
}
li, a {
    display:block;
}
a {
    padding:2px 5px;
    text-decoration:none;
    color:#000;
}
li {
    display:none;
}
li:first-child, ul:hover li {
    display:block;
}