JSFiddle - React, Tailwind, and code Playground

by Alin Guta

HTML

<div id="command">
<ul class="triggers">
   <li>1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
   <li>5</li>
   <li>6</li>
</ul>
<div id="nav">
<span class="control prev">Prev</span>
<span class="control next">Next</span>
</div>
</div>

<div id="hire">
<ul class="form">
<form id="myForm" method="post" action="contact.php">
   <li>
       <h1>1. I can do pretty much anything…so, what do you have in mind?</h1>    
      <input type="text" value="Example: website and branding" id="last" name="last" class="fields" onFocus="if(this.value == 'Example: website and branding') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Example: website and branding';}" />
   </li>
   <li>
       <h1>2. Do you have a current website?</h1>    
      <input type="text" value="If you do, please insert the link…" id="last" name="last" class="fields" onFocus="if(this.value == 'If you do, please insert the link…') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'If you do, please insert the link…';}" />
   </li>
    <li>
       <h1>3. What artistic current suits you best?
</h1>    
      <input type="text" value="Example: Neo-minimalism" id="last" name="last" class="fields" onFocus="if(this.value == 'Example: Neo-minimalism') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Example: Neo-minimalism';}" />
   </li>
   <li>
       <h1>4. What is your favorite color (or combination)?</h1>    
      <input type="text" value="Come on, this one’s simple" id="last" name="last" class="fields" onFocus="if(this.value == 'Come on, this one’s simple') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Come on, this one’s simple';}" />
   </li>
   <li>
       <h1>5. Did you come to me by someone’s recommendation?</h1>    
      <input type="text" value="If so, please type in the name so I know who to thank" id="last" name="last" class="fields" onFocus="if(this.value == 'If so, please type in the name so I know who to thank') {this.value =...

CSS

body { background-color:#fff; position:relative; font-size:14px; font-family:arial;}

h1{
    font: 15px 'Calibri';
	color: #066666;
}

.fields {
	font: 13px 'Calibri';
	color: #066666;
	background-color: transparent;
	border-width: 0px;
	border: 1px solid #666666;
	padding: 0px 0px 3px 0px;
	margin: 0px 0px 3px 0px;
	width: 500px;
	resize: none;
	overflow: auto;
}

#hire { margin:50px; width:700px;position:relative; }

ul.form { position:relative; top:0px;left:0px;width:500px; }
ul.form li { position:absolute; top:0px;left:0px; }

ul.triggers { position:relative; padding:0; width:200px;margin:0 auto; }
ul.triggers li {float:left; margin:0 5px; font: bold 16px arial; cursor:pointer; background-color:#ccc; color:#000; padding:5px;
}
ul.triggers li.active {background-color:red; color:#000;}
#command{
    width:200px;
    height:50px;
    position:relative;
    margin:0 auto;
    padding:40px;
}
#nav{
    width:80px;
    position:relative;
    top:30px;
    margin:0 auto;
    padding:0;
}
.control {color:#000; cursor:pointer;}
.prev { float:left; }
.next { float:right; }


.button {
	position: relative;
	display: inline-block;
	padding: 0 40px;
	outline: none;
	border: none;
	background: #066666;
	color: #fff;
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
    letter-spacing: 3px;
	line-height: 4;
	text-transform:uppercase;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
	opacity:0.7;
}
.button:hover {
	padding: 0 100px;
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    transition: all 0.4s ease;
	opacity:1;
}

JavaScript

var triggers = $('ul.triggers li');
var form = $('ul.form li');
var lastElem = triggers.length-1;
var target;

triggers.first().addClass('active');
form.hide().first().show();

function sliderResponse(target) {
    form.fadeOut(300).eq(target).slideDown(300);
    triggers.removeClass('active').eq(target).addClass('active');
}

triggers.click(function() {
    if ( !$(this).hasClass('active') ) {
        target = $(this).index();
        sliderResponse(target);
    }
});

$('.next').click(function() {
    target = $('ul.triggers li.active').index();
    target === lastElem ? target = 0 : target = target+1;
    sliderResponse(target);
});
$('.prev').click(function() {
    target = $('ul.triggers li.active').index();
    lastElem = triggers.length-1;
    target === 0 ? target = lastElem : target = target-1;
    sliderResponse(target);
});