JSFiddle - React, Tailwind, and code Playground

HTML

<div class="kasting" style="*display:none;">
	<div class="kastingh">
		<div class="kastcont kastingblock">
			<form action="<?php echo JRoute::_( '', true, $params->get('usesecure')); ?>" method="post" name="feedback_form">
		    		<span>Заполните поля ниже</span>
				<div class="select">
				    <a href="javascript:void(0);" name="temaemail" class="slct">Выберите тему вопроса</a>
				    <ul class="drop">
				        <li><a href="">Запись на кастинг</a></li>
				        <li><a href="">Заказать обратный звонок</a></li>
				        <li><a href="">Иное</a></li>
				    </ul>
				    <input type="hidden" id="select" />
				</div>
		    			<input type="hidden" name="form_send" value="1" />
		            	<input type="text" name="name" placeholder="<?php echo JText::_('modcallback_name') ?>">
		            	<input type="text" name="phone" value="Ваш email">
		            <?php if ($show_time) { ?>
		            	<textarea type="text" name="time" placeholder="Расскажите о себе"></textarea>
		            <?php } else { ?>
		            	<input type="hidden" name="time" value="" />
		            <?php } ?>
		            <?php if ($show_kcaptcha) { ?>
		            	<div class="kastkcapt">
			            	<span><?php echo JText::_('modcallback_enter_kcaptcha') ?></span>
		            		<div>
			            		<div><img src="<?php echo $path;?>image.php" /></div>
			            		<div><input type="text" name="kcaptcha_code" class="input_cb_kcaptcha" placeholder="" /></div>
		            		</div>
		            	</div>
		            	
		            <div class="clr"></div>
		            <?php } else { ?>
		            	<input type="hidden" name="kcaptcha_code" value="" />
		            <?php } ?>
		            <div class="kastbutton">
			            <input type="hidden" name="title_cb" value="<?php echo addslashes($doc->getTitle());?>" />
						<input class="kastbutton1" type="button" value="Закрыть"/>
						<input class="kastbutton2" type="submit" value="<?php echo...

CSS

@import url(http://fonts.googleapis.com/css?family=Exo+2:400,200&subset=latin,cyrillic);

.kasting{
	width: 100%;
	position: fixed;
	top: 59px;
	left: 0px;
	background-color: #fff;
	z-index:99;
	cursor:default;
	background: transparent;
	font-family: 'Exo 2', sans-serif;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.69);
	border-bottom: 1px solid #777;
}
.kasting input{
	outline:none;
}
.kastingh{
	position: relative;
	background-color:#344A5F;
	*border-radius: 0 0 5px 0;
	padding:10px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAJCAAAAAAqODLyAAAAPUlEQVQIHRWLQQoAIBAC/f9Dg2BzIfBQQVseBGdQcOhkKdFvkwOTLSo4uRcRxbV/R+XRYAq3qzkw2cJDHx7OT0RL3aThrgAAAABJRU5ErkJggg==);
}
.kastcont,.kastcont2{
	max-width: 480px;
	width: 480px;
	height:100%;
	position:relative;
	top:0;
	left: 50%;
	margin-left:-240px;
}
.kastcont2{
	margin-top:20px;
}
.kastingblock form{
	width: 100%;
	overflow: hidden;
	margin: 0;
	margin-top:10px;
}
.kastingblock form > input,.kastingblock form > textarea{
	width: 358px;
	margin: 0 0 -1px 0;
	padding:10px;
	display:inline-block;
	background: #fff;
	font-family: 'Exo 2', sans-serif;
	border:1px solid #ccc;
}

.kastingblock span{
	color: #AD6C00;
}
.kastingblock form > input[name=name]{border-radius:6px 6px 0 0}
.kastingblock form > input:focus,.kastingblock form > textarea:focus{
	box-shadow:inset 0 0 6px rgba(42, 97, 213, 0.5);
}
.kastingblock form > textarea{
	max-width: 358px;
	max-height: 130px;
	height: 70px;
}
.kastingblock form > input::-webkit-input-placeholder,.kastingblock form > textarea::-webkit-input-placeholder { color:#bbb; }
.kastingblock form > input::-moz-placeholder,.kastingblock form > textarea::-moz-placeholder { color:#bbb; }
.kastingblock form > input::placeholder,.kastingblock form > textarea::placeholder { color:#bbb; }

.kastingblock span{
	font-size: 1.5em;
	font-weight: 400;
	color: #555;
}
.kastbutt{
	position: absolute;
	right: -115px;
	top: 84px;
	padding: 5px 10px;
	font-size: 1.6em;
	background-color:...

JavaScript

$('.slct').click(function(){
    var dropBlock = $(this).parent().find('.drop');
    if( dropBlock.is(':hidden') ) {
        dropBlock.slideDown();
        $(this).addClass('active');
        $('.drop').find('li').click(function(){
            var selectResult = $(this).html();
            $(this).parent().parent().find('input').val(selectResult);
            $(this).parent().parent().find('.slct').removeClass('active').html(selectResult);
            
            if ( $(this).text() == "Заказать обратный звонок" ) {
            $("input[name=phone]").val("Телефон");
            } else {$("input[name=phone]").val("Ваш email");}
            dropBlock.slideUp();
return false;
        });
    } else {
        $(this).removeClass('active');
        dropBlock.slideUp();
    }
    return false;
});