JSFiddle - React, Tailwind, and code Playground

by Zeya777

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>"
lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>">
    
    <head>
        <jdoc:include type="head" />
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="robots" content="index, follow" />
        <meta name="keywords" content="joomla, Joomla" />
        <link href="index.php?option=com_content&amp;view=frontpage&amp;format=feed&amp;Itemid=1&amp;type=rss"
        rel="alternate" type="application/rss+xml" title="RSS 2.0" />
        <link href="index.php?option=com_content&amp;view=frontpage&amp;format=feed&amp;Itemid=1&amp;type=atom"
        rel="alternate" type="application/atom+xml" title="Atom 1.0" />
        <script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/mootools.js"></script>
        <script type="text/javascript" src="http://localhost/Joomla-1.5RC2/media/system/js/caption.js"></script>
        <link rel="icon" href="/templates/persik/favicon.ico" type="image/x-icon"
        />
        <link rel="shortcut icon" href="/templates/persik/favicon.ico" type="image/x-icon"
        />
        <link rel="stylesheet" href="/templates/system/css/system.css" type="text/css"
        />
        <link rel="stylesheet" href="/templates/system/css/general.css" type="text/css"
        />
        <link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css"
        type="text/css" />
        <?php //$Itemid=J Request::getInt( 'Itemid', 1, 'get' ); //echo $Itemid;
        ?>
        
        <body>
            <!--оформление страницы сайта-->
            <div id="wrap">
                <!--блок шапки сайта header -->
                <div id="header">
                    <jdoc:include type="modules" name="top" style="xhtml" />
                </div>
                <!--вывод содержимого страницы-->
                <div id="pole">
                    <!--вывод...

CSS

* {
    margin:0;
    padding:0;
}
/*стандартные оформление ссылок и заголовков*/
 h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover h1 a:visited, h2 a:visited, h3 a:visited, h4 a:visited, h5 a:visited, h6 a:visited {
    font-weight: normal;
    font-style: normal;
    text-decoration: none;
}
/*оформление всех ссылок на сайте*/
 a {
    text-decoration: underline;
    color:#185476;
}
/*непосещенная ссылка*/
 a:link {
    text-decoration: underline;
    color: #482E1F;
}
/*посещенная ссылка*/
 a:visited, a.visited {
    text-decoration: underline;
    color:#482E1F;
}
/*ссылка при наведении*/
 a:hover, a.hover {
    text-decoration: underline;
    color: #ffffff;
}
/*заголовки 1 уровня*/
 h1, h1 a, h1 a:link, h1 a:visited, h1 a:hover {
    font:bold 18px Arial, Helvetica, sans-serif;
    font-style:italic;
    color: #759b14;
    text-align:center;
}
/*заголовки 2 уровня*/
 h2, h2 a, h2 a:link, h2 a:visited, h2 a:hover {
    font-size:bold 14px;
    color: #17455d;
    font-style:italic;
    text-align:center;
    font-family:Georgia;
}
/*заголовки 3 уровня*/
 h3, h3 a, h3 a:link, h3 a:visited, h3 a:hover {
    font-size: 18px;
    color: #ffffff;
    text-align:center;
    font-style:italic;
    font-family:Georgia;
}
/*заголовки 4-6 уровня*/
 h4, h4 a, h4 a:link, h4 a:visited, h4 a:hover, h5, h5 a, h5 a:link, h5 a:visited, h5 a:hover, h6, h6 a, h6 a:link, h6 a:visited, h6 a:hover {
    font-size: 125%;
    color: #17455d;
}
/*оформление изображений в контенте*/
 img {
    border: 2px double #127393;
    /* Параметры границы */
}
/*оформление абзацев текста*/
 p {
    margin: 5px 0 10px 0x;
}
LI {
    color: #127393;
    /* Цвет маркеров */
}
/*оформление заднего плана и форматирование текста сайта и межстрочного расстояния*/
 body {
    background-color:#cccccc;
    margin:0 auto;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    line-height:1.3;
    color:...