JSFiddle - React, Tailwind, and code Playground

by Mariel Temblor

HTML

<?php

$to = "prettychii03@gmail.com";
$subject = isset($_POST['subject']) ? $_POST['subject'] : '';

$fname = isset($_POST['fname']) ? $_POST['fname'] : '';
$lname = isset($_POST['lname']) ? $_POST['lname'] : '';
$email = isset($_POST['email']) ? $_POST['email'] : '';
$pnum = isset($_POST['pnum']) ? $_POST['pnum'] : '';
$message = isset($_POST['message']) ? $_POST['message'] : '';
$emailType = isset($_POST['emailType']) ? $_POST['emailType'] : '';

$body = <<<Email

First Name: $fname
Last Name: $lname
Email Address: $email
Phone Number: $pnum
Message:
$message

Thanks,
$lname, $fname
 
Email;
$header = "From: $email";

$subject2 = $emailType." : ".$subject;
if($_POST){
	if($lname == '' || $fname == '' || $email == '' || $pnum == '' || $message == ''){
		
	}else{
		mail($to, $subject2, $body, $header);
		echo "Thank you for sending us an email! We have recieved your message.";
	}

}
?>

<body>
<div id="container"> <!--wrapper-->
	<header id="header">
    	<div id="menu" class="menu"> <!--navMenu-->
        	<ul>
                <li><a href="index.php" > HOME </a></li>
                <li>OUR PRODUCT
				<ul> 
					<li><a href="productOverview.php" > PRODUCT OVERVIEW</a></li>
					<li><a href="usage.php" > CHEESECLOTH USAGE</a></li>
					<li><a href="reviews.php" > PRODUCT REVIEWS </a></li>
				</ul>
				</li>
				<li> SUGGESTIONS 
				<ul>
					<li><a href="tips.php" > TIPS and IDEAS </a></li>
					<li><a href="recipe.php" > RECIPES </a></li>
					<li><a href="ideas.php" > SEND US YOUR IDEAS </a></li>
				</ul>
				</li>
				<li><a href="about.php" > ABOUT US </a> </li>
				<li><a href="contact.php" > CONTACT US </a> </li>
        	</ul> 
			<br class="clearFloat" />
        </div>
</header>

<section id="content">
		<div class="about" id="about">
		<center>
			<h2>- CONTACT US -</h2>
			<h4>Got any question or comments for us? Or do you have any suggestion that you would want us to share the world? Give us your thoughts and we might feature your work on our...

CSS

.fmenu,
.push {
  height: 4em;
  clear: both;
}
/*ends here */

body {
  background: url(images/cheeseclothBG.jpg)no-repeat center center fixed;
  font-family: Avenir !important;
  font-size: 12pt;
  line-height: 20px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
#header {
  background: url(images/header.jpg) no-repeat;
  min-height: 270px;
  overflow: hidden;
  background-size: 100%;
}
#content {
  float: left;
  width: 100%;
  margin-top: -101px;
  background: #fff;
  position: relative;
}
#img {
  margin: 5px;
  padding: 5px;
  border: 1px solid #0000ff;
  height: auto;
  width: auto;
  float: left;
  text-align: center;
}
#img img {
  display: inline;
  margin: 5px;
  border: 1px solid #ffffff;
}
#desc {
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
}
#container {
  width: 826px;
  margin: 0 auto;
  box-shadow: 0 0 5px 1px #ccc;
}
#menu {
  margin: 0;
  padding: 0;
}
#menu ul {
  margin: 0;
  padding: 0;
  line-height: 30px;
  margin-left: 35px;
  margin-top: 139px;
}
#menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  float: left;
  position: relative;
  background: #fff;
}
#menu ul li a {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  margin-left: 10px;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li {
  text-align: center;
  font-family: "Comic Sans MS", cursive;
  font-size: 12px;
  text-decoration: none;
  height: 30px;
  width: 150px;
  display: block;
  color: #000;
  text-shadow: 1px 1px 1px #999;
}
#menu ul li ul li a {
  text-align: center;
  margin-left: 0px;
}
#menu ul li ul {
  margin-top: -5px;
}
#menu ul li ul li {
  margin-top: -2px;
  margin-left: -35px;
  position: relative;
}
#menu ul ul {
  position: absolute;
  top: 32px;
}
#menu ul li:hover ul {
  z-index: 1;
}
/*******************************/

#menu...