JSFiddle - React, Tailwind, and code Playground

by first web

HTML

<header>
      <h1 class="header" >
        بـسـم الـلـه الـرحـمـن الـرحـيـم
      </h1>
    </header>
   <div Class="underHeader">
      هذا التصميم تجريبى تم إنشائه عبر محمد يحيى عبر تعلم بعض الكورسات من 
      <span>
        Html,Css
      </span>
      وغيرها بإستخدام برنامج 
      <span class="spanEn">
        Brackets 
      </span>
    </div>
    <fieldset>
      <legend>
        السيرة الذاتية
      </legend>
      <table>
        <caption>
          معلومات الشخصية
        </caption>
        <tr>
          <td>
            الاسم
          </td>
          <td>
            :
          </td>
          <td>
            محمد يحيى
          </td>
        </tr>
        <tr>
          <td>
            العمر
          </td>
          <td>
            :
          </td>
          <td>
            16 عام
          </td>
        </tr>
        <tr>
          <td>
            الصف
          </td>
          <td>
            :
          </td>
          <td>
            الثانى الثانوية العامة
          </td>
        </tr>
        <tr>
          <td>
            الدولة
          </td>
          <td>
            :
          </td>
          <td>
            مصر
          </td>
        </tr>
      </table>
      <table>
        <caption>
          المستوى فى لغات البرمجة
        </caption>
        <tr>
          <th>
            اللغة
          </th>
          <th>
            المستوى
          </th>
        </tr>
        <tr>
          <td class="spanan">
            Html
          </td>
          <td>
            <progress value="9" max="10">
            </progress>
          </td>
        </tr>
        <tr>
          <td class="spanan">
            Css
          </td>
          <td>
            <progress value="4" max="10">
            </progress>
          </td>
        </tr>
        <tr>
          <td class="spanan">
            Html5
          </td>
          <td>
            <progress value="2" max="10">
            </progress>
          </td>
        </tr>
       ...

CSS

.header 
      {
        text-align: center;
        background-color: rgba(24, 21, 21, 0.1);                      
        margin: 0px  ;
        padding: 10px ;
        font-size:40px;
        width:auto;
        height:auto;
        color:black;                    }
      .underHeader
      {
        direction:rtl;
        background-color: rgba(24, 21, 21, 0.1);                      
        margin: 5px;
        padding: 5px ;
        font-size:30px;
        color:black;                     }
      body
      {
        background-image: url('http://store1.up-00.com/2016-06/1465248553751.jpg');
        background-repeat:no-repeat; /* تكرار الخلفبة */
        background-position:center;
        margin: 0;
        padding: 0;
        text-align: right;
        direction: rtl;
        font-family: cursive;
        font-family:monospace
      }
      filedset
      {
        background-color: rgba(24, 21, 21, 0.1);color:black;                      
        text-align: right;
        direction: rtl;
        padding: 10px;
        margin: 10px;
      }
      legend
      {
        color:black;                        
        font-size: 30px;
        direction:rtl;
      }
      table tr td
      {
        border:10px;
        font-size:25px;
        color:black;                   
      }
      caption
      {
        font-size: 20px
      }
      .divBody
      {
        text-align: right;
        direction: rtl;
      }
      span
      {
        color:red;
        background-color: yellow;
        font-family: cursive;
      }
      .spanEn
      {
        color:black;
        background-color: rgba(24, 21, 21, 0.1);                  
        font-family: cursive;
      }
      .spanan
      {
        color:black;
        font-family: cursive;
      }
      th
      {
        text-align: center;
      }
      .footer 
      {
        text-align: center;
        color:black;
        background-color: rgba(24, 21, 21, 0.1);                      
        margin: 0px...

JavaScript

alert("مرحبا بكم فى موقع تجريبى من تصميمى");