JSFiddle - React, Tailwind, and code Playground

by tebrown

HTML

<html>
<head>
<meta charset='utf-8'/>
<title>Sam Clark</title>

    <script type="text/javascript" src='http://www.rugbymanager.co.nz/Other/jquery.zoom.js'></script>
<script type="text/javascript" src="http://www.rugbymanager.co.nz/Other/cycle.js"></script>
<script type="text/javascript" src="http://www.rugbymanager.co.nz/Other/chili-1.7.pack.js"></script>

    <script>
    $(document).ready(function(){
        $('#ex1').zoom();
        $('#ex2').zoom();
    });
</script>
    

</head>


<body>
    
    <div id="container">
        <div class="logo">Logo</div>
        <div class="navigation">About&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Archive&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Purchase&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Contact</div>    
        <div class="rule"></div>
        <div class="rule2"></div>
    
        
        <div class="right">
            <div class="right-text"><a href="#"><div id="next1">Next</div><div id="output1"></div><div id="prev1">Previous</div></a><p></div>
                    <div class="border"></div>
    

        </div>
        
            <div class="left">
                
            <div id="s1">
                    

                <div class='zoom' id='ex1'>
                    <img src='http://www.rugbymanager.co.nz/Other/bird2.png' width='700' height='438'/>
                     <div class="text2"><b>Kakapo, Ink on Paper, 2008</b><br /><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae pharetra erat. Pellentesque a justo, porttitor porta tellus. Integer rutrum dolor eu turpis suscipit feugiat. Praesent risus arcu, fermentum et convallis sed, vehicula sit amet turpis. In hac habitasse platea dictumst. Sed nec bibendum purus.<p class="border2"></p></div>
                </div>
                
                  <div class='zoom' id='ex2'>
                    <img src='http://www.rugbymanager.co.nz/Other/bird3.png' width='700' height='438'/>
                     <div class="text2"><b>Uni, Ink on Paper,...

CSS

html,body{margin:0;padding:0;z-index:1;}
body{color:#000;font-family:Arial, serif;font-size:12px;font-style:normal; line-height:1.50;}

#container{width:950px;margin:0 auto;z-index: 1; }
.border {border-bottom:1px solid #000; }
.padding {padding:15px;}
.logo { margin-top:50px; float:left;}
.navigation { margin-top:50px;float:right; }
.rule { padding-top:20px;margin-bottom:20px;clear:both;border-bottom:3px solid #000; width:100%;}
.rule2 { margin-bottom:20px;clear:both;border-bottom:1px solid #333; width:100%;}


.border2 {border-bottom:1px solid #000; width: 200px; clear:both;}


.search { color:#ccc;padding:5px;border:1px solid #ccc; height:25px;width:248px; margin-bottom:20px;}

.left { float:left; width: 75%; margin-left:240px; height:500px;  }
.right { float:left;width:25%; margin-top:-17px; z-index: 1; }
.right-text {padding-top:15px;padding-bottom:15px;z-index: 51;}

/*font-family:"Times New Roman", Times, sans-serif !;line-height:1.70;font-size:14px;font-style:italic;    */

.zoomIcon { width:33px; height:33px; position:absolute; top:0;right:0;background:url(images/icon.png);}

/* these styles are for the demo, and are not required for the plugin */
.zoom {position:absolute;}
.zoom img {}
.zoom img::selection {  }

.text2 { z-index: 999999; position: absolute; margin-top: -400px;margin-left: -200px; width: 230px;}

#output1 {
float: right;
margin-right:55px;
color: #000;
}

#prev1 {
float: left;
color: #000;
cursor: pointer;
}

#next1 {
float: right;
color: #000;
cursor: pointer;
}