JSFiddle - React, Tailwind, and code Playground

by nikolya223

HTML

<!DOCTYPE html> <!--это один из самых важных элементов страницы, бывает разных видов. сейчас, рекомендуется писать так - стандарт html5-->
<html><!-- открытие документа --> 
<head>
<!-- с английского языка, название тега переводится как голова, что не лишено смысла. Он распологается сверху страницы. В данный тег рекомендуется подключать скрипты, таблицы стилей и мн.др. -->
<tittle>Титульная страница</tittle> <!--Это название нашей странички оно отображается на вкладке(т.к. пример я показываю во фрейме, мы его почему то видим)-->
<meta > - <!-- также в тег HEAD прописываются различные метазаголовки, которые несут множество функций, но об этом вам лучше прочитать в справочнике -->

<!-- Это таблица стилей, всю разметку рекомендуется заносить сюда(это я для простоты. на самом деле заносится в файл с расширением .css и подключается через <LINK   > )-->
<style>
    /*Выбираем элементы по тегу*/
    
    /*небольшой трюк*/
 html,body{
height: 100%;
    }
  /*Выбираем элементы по классу*/
.OurDivClass{
    width: 1024px;           /*ширина нашего элемента*/
    height: 100%;            /*высота нашего элемента*/
background-color: #48A4F7;   /*фон нашего элемента*/
margin: 0 auto;              /*с помощью margin - центруем наш элемент*/
    position: relative;      /*существуют relative,absolute, fixed. можно не задавать*/

} 
    /*все теги <p>(которые не имеют классов)будут отображаться так*/
    p1{color: #0C20DA;  
    margin: 20px auto;  
    font-family: Arial; /*задаём шрифт*/
    font-style: italic; /*выделяем элемент курсивом*/
    
    }
    .shapka{
    background-color: #6473F7;
    height: 50px;
    border-bottom: 3px solid white; /*рисуем нижний border*/
    }
    .leftColumn {display: table-cell; /*отображение элемента, подробнее в справочник*/
    width: 300px;
    height: 100%;
    text-align: center;
    background-color: #A697EE;
    border-right: 3px solid white;
    }
    .centrColumn{
    display: table-cell; /*отображение элемента, подробнее в...