JSFiddle - React, Tailwind, and code Playground

by rami7250

HTML

<div class="w3-container">
<a onclick="document.getElementById('id01').style.display='block'" class="w3-button">למדיניות הפרטיות ותנאי השימוש</a>

<div id="id01" class="w3-modal">
 <div class="w3-modal-content w3-card-4 w3-animate-zoom">
  <header class="w3-container w3-blue"> 
   <span onclick="document.getElementById('id01').style.display='none'" 
   class="w3-button w3-blue w3-xlarge w3-display-topright">&times;</span>
   <h2>מדיניות פרטיות</h2>
  </header>

  <div class="w3-bar w3-border-bottom">
   <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'London')">מדיניות פרטיות</button>
   <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Paris')">תנאי שימוש</button>
   <!--
   <button class="tablink w3-bar-item w3-button" onclick="openCity(event, 'Tokyo')">חו</button>
   -->
  </div>

  <div id="London" class="w3-container city">
   <p class="text-center" style="text-align:center;"><strong><u><span style="font-size: 24pt;">מדיניות פרטיות</span></u></strong><span></span></p>
   
   <div style=direction:rtl>
<p>מדיניות פרטיות זו מתייחסת לתנאי השימוש באתר <a href="http://www.ebaysecrets.co.il">http://www.ebaysecrets.co.il</a> (להלן: "האתר") והשירות הניתן בו (להלן: "השירות"), ומהווה חלק מתנאי השימוש באתר בין מפעילת האתר אתר הסודות של איביי (להלן: "אתר הסודות של איביי") לבין המשתמש באתר (להלן: "אתה" או "את" או "המשתמש" או "המשתמש"). בשימוש באתר הינך מסכים למדיניות פרטיות זו. מדיניות פרטיות זו מנוסחת בלשון זכר לשם הנוחות בלבד וחלה על גברים ונשים כאחד.<span></span></p>

<p><strong>איזה מידע אנו אוספים?</strong><span></span></p>
<p>כל משתמש באתר המבקש להירשם לניוזלטר של אתר הסודות של איביי נדרש למסור פרטים אישיים שונים כגון שם ושם משפחה, טלפון, כתובת דואר אלקטרוני.<span></span></p>
<p>בנוסף, משתמש המעוניין לרכוש מוצרים או שירותים שמוצעים מעת לעת באתר (כגון הרשמה לקורס או רכישת ספר הסודות של איביי) מתבקש גם כן למסור פרטי כתובת אימייל המשוייכת ל-Paypal ,או לחילופין, פרטים אישיים ופרטי כרטיס אשראי.<span></span></p>

<p><strong>מה...

CSS

/* W3.CSS 4.10 February 2018 by Jan Egil and Borge Refsnes */
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent;-webkit-text-decoration-skip:objects}
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
dfn{font-style:italic}mark{background:#ff0;color:#000}
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em...