JSFiddle - React, Tailwind, and code Playground

by Mark Seymour

HTML

<link rel="stylesheet" href="http://lokeshdhakar.com/projects/lightbox2/css/lightbox.css">
<script src="http://lokeshdhakar.com/projects/lightbox2/js/lightbox-2.6.min.js"></script>
<script src="http://osvaldas.info/examples/drop-down-navigation-touch-friendly-and-responsive/doubletaptogo.min.js"></script>
<div class="item">
  <a class="thumb img" data-lightbox="items" href="http://placehold.it/236x157"><img src="http://placehold.it/236x157" alt="..." /></a>
  <div class="meta">
    <p class="title">Some text here</p>
    <a class="permalink" href="#">Link</a>
    <ul class="social">
        <li><a href="#"><img src="http://placehold.it/40x20/EEE/F00" alt="PinIt!"/></a></li>
        <li><a href="#"><img src="http://placehold.it/40x20/00F/FFF" alt="PinIt!"/></a></li>
    </ul>
  </div>
</div>

CSS

.item { width: 236px; background: #333; overflow: hidden; position: relative; }
.item > a img { vertical-align: bottom; }
.item .meta p { font-size: 80%; color: #888; padding: 4pt; margin: 4pt; }
.item .social, .item .permalink { display: none; position: absolute; top: 0; margin: 4pt; padding: 0; }
.item .social { left: 0; list-style: none; }
.item .social li { display: inline-block; margin: 0; padding: 0; line-height: 0; vertical-align: middle; }
.item .permalink { right: 0; }
.item:hover .social, .item:hover .permalink { display: inline; }

JavaScript

$('.items .item, .nav-collapse li:has(ul)').doubleTapToGo();