JSFiddle - React, Tailwind, and code Playground

by Dano007

HTML

<!DOCTYPE html>
<html>

<head>

    <!--Meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!--Title-->
    <title>Pop Up Modal Window</title>

    <!--Stylesheets-->
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/csshake.min.css">
    <script type="text/javascript" src="/scripts/jquery.js"></script>
    <script type="text/javascript" src="/scripts/jqueryui.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="js/jquery.reveal.js"></script>
    <script src="//www.parsecdn.com/js/parse-1.2.18.min.js"></script>

    <!--HTML5 Shiv-->
    <!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
			<![endif]-->

</head>

<body>

    <!---Contains the visual shaking and the id that gets the image to display in the pop up box once clicked!-->
    <div class="shake shake-little">
        <img class="go" src="http://kudosoo.com/Pics/John_Williams.jpg" alt="img">
    </div>
    <div class="shake shake-little">
        <img class="go" src="http://kudosoo.com/Pics/Lisa_Wong.jpg" alt="img">
    </div>


    <!---ends-->

    <!---Pop up box with info about the badge and options for user to complete-->
    <div id="modal">
        <div id="heading">
            Award your friend this badge!?
        </div>

        <div id="content">

            <div id="badgeselect">
            </div>


            <p>This will be text that describes the badge
                <br>and the reason for awarding it</p>

            <form action="#" method="get">

                <input type="text" placeholder="Select friend" id="username" required/>
                <input type="text" placeholder="Add comment" id="email" required/>

                <br>
                <br>

     ...