JSFiddle - React, Tailwind, and code Playground

by Pavel Ivanov

HTML

<?php
/**
 * Created by PhpStorm.
 * User: paus
 * Date: 26.11.14
 * Time: 18:23
 */
?>

<div id="test-modal-11" class="white-popup-block-big mfp-hide" style="text-align:center;">
    <div class="proj_registration_window">
        <h1>Login</h1>
        <br>


        <a href="<?php echo $adapters['vk']->getAuthUrl(); ?>" class="proj_nob"><img src="<?php bloginfo('template_directory'); ?>/bitrix/templates/template_copy/assets/images/button_vk.png"></a>
        <a href="<?php echo $adapters['facebook']->getAuthUrl(); ?>" class="proj_nob"><img src="<?php bloginfo('template_directory'); ?>/bitrix/templates/template_copy/assets/images/button_fb.png"></a>
        <a href="<?php echo $adapters['odnoklassniki']->getAuthUrl(); ?>" class="proj_nob"><img src="<?php bloginfo('template_directory'); ?>/bitrix/templates/template_copy/assets/images/button_odn.png" class="proj_last"></a>

        <div style="padding-top:30px; padding-bottom:30px;" class="proj_small_txt proj_grey_txt">Мы не будем делать никаких записей от вашего имени в вашей соцсети</div>

        <div style="border-bottom:1px solid #d7d7d7;"></div>
        <div style="width:190px; background-color:#FFF; margin:0px auto; margin-top:-8px; text-align:center; font-size:13px;">Login using E-mail</div>

        <br>
        <br>
        <form id="reg_form" method="post">
            <input type="text" id="form_email" value="e-mail">
            <input type="text" id="form_pwd" value="пароль">
        </form>


        <div style="width:360px; margin:0px auto">
            <div style="width:308px; display:inline-block; margin:0px auto; font-size:13px;"><a class="proj_allgreen_simple" href="./proj_2.html">Войти</a></div>
            <br>
            <br>
            <br>
            <div class="proj_reg_forgot">
            <span class="proj_grey_txt"><a href="#">Забыли пароль</a><br>
            Еще не зарегистрированы? <a href="#">Зарегистрироваться</a></span>
            </div>
            <br>
            <br>
    ...

CSS

.proj_top_menu_item {
    display:table-cell;
    vertical-align:top;
    width:137px;
    text-align:center;
    font-size:13px;
    padding-top:20px;
    line-height:16px;
}
.proj_top_menu_item img {
    display:block;
    margin:0px auto;
    padding-bottom:16px;
}
.proj_top_menu_item span {
    opacity:0.2;
}
.proj_top_menu_item a {
    border-bottom:0px;
    color:#ffffff;
}
.proj_allgreen {
    background-color:#b3d109;
    border:1px solid #b3d109;
    border-radius:2px;
    color:#FFF;
    text-align:center;
    width:168px;
    padding:11px 0px 11px 0px;
    margin-top:0px;
    margin-bottom:0px;
    display:block;
}
.proj_allgrey {
    background-color:#cdcdcd;
    border:1px solid #cdcdcd;
    border-radius:2px;
    color:#FFF;
    text-align:center;
    width:168px;
    padding:11px 0px 11px 0px;
    margin-top:0px;
    margin-bottom:0px;
    display:block;
}
.proj_green_border {
    background-color:#ffffff;
    border:1px solid #b3d109;
    border-radius:2px;
    color:#252525;
    text-align:center;
    width:168px;
    padding:11px 0px 11px 0px;
    margin-top:0px;
    margin-bottom:0px;
    display:block;
}
.proj_left_inner_div {
    width:168px;
    margin:0px auto;
    padding-bottom:20px;
}
.proj_left_inner_div span {
    display:block;
    color:#999999;
}

.proj_social_left {
    background-color:#f2f2f2;
    width:210px;
    font-size:13px;
    margin-top:2px;
    padding:20px;
    margin-bottom:30px;
}

.proj_social_left img {
    padding-right:10px;
    padding-bottom:10px;
}

.proj_social_left .faded {
    opacity:0.4;
}


.proj_subs_left {
    width:40px;
    height:40px;
    display:inline-block;
    margin:4px 4px 4px 0px;
}


.proj_subs_holder_left span {
    font-size:13px;
}

.proj_subs_holder_left {

}

.proj_box_top_arr {
    border: 1px solid #B3D109;
    color: #111111;
    display: inline-block;
    float: left;
    font-size: 13px;
    padding: 6px 9px 6px 9px;
    position: relative;
   ...