JSFiddle - React, Tailwind, and code Playground

by Agony

HTML

<div data-role="page" id="page1">
    <div data-theme="a" data-role="header">
        <h3>
            Coasters
        </h3>
    </div>
    <div data-role="content">
    	<div class="container">
        <div class="outerimgr">
            <img src="images\beast1.jpg" alt="image">
                <a href="http://www.google.com" target="_blank" class="lbLink" data-transition="fade">
        	The Beast
        	</a>
			<div class="descCont">Beast opened in 1979
			</div>
        </div>
        <div class="outerimgl">
            <img src="images\vortex1.jpg" alt="image">
        	<a href="text\vortex.txt" target="_blank" class="lbLink" data-transition="fade">
        	Vortex
        	</a>
			<div class="descCont">Vortex opened in 1987
			</div>
        </div>
        <div class="outerimgr">
            <img src="images\db1.jpg" alt="image">
        	<a href="text\db.txt" target="_blank" class="lbLink" data-transition="fade">
        	Diamondback
        	</a>
			<div class="descCont">Diamondback opened in 2009
			</div>
        </div>
        <div class="outerimgl">
            <img src="images\fd1.jpg" alt="image">
        	<a href="text\fd.txt" target="_blank" class="lbLink" data-transition="fade">
        	The Flight Deck
        	</a>
			<div class="descCont">Flight Deck opened in 1993
			</div>
        </div>
        <div class="outerimgl">
            <img src="images\fh1.jpg" alt="image">
        	<a href="text\fh.txt" target="_blank" class="lbLink" data-transition="fade">
        	Firehawk
        	</a>
			<div class="descCont">Firehawk opened in 2007
			</div>
                        </div>
        <div class="outerimgr">
            <img src="images\inver1.jpg" alt="image">
        	<a href="text\inver.txt" target="_blank" class="lbLink" data-transition="fade">
        	Invertigo
        	</a>
			<div class="descCont">Invertigo opened in 1999
			</div>
          </div>
       </div>
    </div>
  </div>

CSS

img{
   	top: 50%;
  	left: 50%;
   	width: 100%;
	height: 100%;
}
.outerimgl{
	float:left;
	width: 47%;
	height: 100px;
	position: relative;
	background-color: #fbfbfb;
	border: 1px solid #b8b8b8;
    	margin-bottom: 40px;
	margin-top: 10px;
}

.outerimgr{
	float:right;
	width: 47%;
	height: 100px;
	position: relative;
	background-color: #fbfbfb;
	border: 1px solid #b8b8b8;
    	margin-bottom: 40px;
	margin-top: 10px;
}

.container{
}

a:hover{
   	cursor:pointer;
}

.descCont{
	white-space:nowrap;
}

JavaScript

$(".lbLink").click(function() {
  	  $(this.attr("href")).dialog();
 	 });