JSFiddle - React, Tailwind, and code Playground
by fredd man
HTML
<meta name="generator" content="WordPress 5.4.4">
<link rel="stylesheet" href="https://embed-ssl.wistia.com/deliveries/9f61594bd9f9dc214d15c2863d6fdf97.bin?disposition=attachment&filename=style.css" type="text/css" media="all">
<script type="text/javascript" async src="https://www.google-analytics.com/analytics.js"></script>
<script src="https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.es.N56kUpoh5hk.O/m=plusone/rt=j/sv=1/d=1/ed=1/am=wQE/rs=AGLTcCOGVlVrS91dmpRiVL1FEDSrI7JTQQ/cb=gapi.loaded_0" async></script> ==0
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-144276616-1'); ==$0
</script>
<script type="text/javascript"> if(top.location!=this.location) top.location=this.location;</script> ==$0
<script type="text/javascript" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script>
<script type="text/javascript">
var nW,nH,oH,oW; function zoomToggle(iWideSmall,iHighSmall,iWideLarge,iHighLarge,whichImage){ oW=whichImage.style.width;oH=whichImage.style.height; if((oW==iWideLarge)||(oH==iHighLarge)){ nW=iWideSmall;nH=iHighSmall; }else{ nW=iWideLarge;nH=iHighLarge; } whichImage.style.width=nW;whichImage.style.height=nH; } ==$0
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(".contenido_tab").hide(); //Ocultar capas
jQuery("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña
jQuery(".contenido_tab:first").show(); //Mostrar contenido primera pestaña
// Sucesos al hacer click en una pestaña
jQuery("ul.tabs li a").click(function() {
jQuery("ul.tabs li").removeClass("activa");
jQuery(this).parent().addClass("activa");
jQuery(".contenido_tab").hide();
var activatab = jQuery(this).attr("href");
jQuery(activatab).fadeIn();
...CSS
body {
margin:0;
padding-top:0px;
background:#2F2723 ;
font-family:Verdana,Tahoma,sans-serif;
color:#99806B;
font-size:13px;
}
img {
border:0;
}
a {
color:#EFC8B3;
text-decoration:none
}
a:hover {
color:#CF9C81;
text-decoration:none
}
h1, h2, h3, h4, h5, h6 {
}
blockquote.cita1 {
width: 480px;
margin: 10px 0 10px 40px;
padding: 10px;
text-align: justify;
font: 14px/20px italic Times, serif;
color: #FFFFFF;
background: transparent;
border-left: 4px solid #FF9933;
}
blockquote.cita2 {
width:400px;
padding: 5px 18px 10px 10px;
text-align: justify;
font: normal;
color: #FFFFFF;
background: #2F2723 url(https://lh5.googleusercontent.com/_N0G_G-cxQDM/TWTLmUj3TiI/AAAAAAAAC78/dNkQw_UgMgk/s31/quotescierre22133b02.png) no-repeat 5% 15%;
}
blockquote.cita2 span {
display: block;
padding: 15px 10px 20px 40px;
background: url(https://lh5.googleusercontent.com/_N0G_G-cxQDM/TWTL3GPUwaI/AAAAAAAAC8A/eNxjd3XW5Iw/s31/quotescierre213203a.png) no-repeat bottom right;
}
.c2x {
position:absolute;
top: 610px;
left:700px;
width:300px;
height:250px;
}
.c1x {
position:absolute;
left: 118px;
top: 40px;
width: 56px;
height: 14px;
}
.clear {
clear:both;
}
.alignleft {
float:left;
padding:2px 0 0 5px;
}
.alignright {
float:right;
padding:2px 0 0 5px;
}
/* The Wrapper */
#wrapper {
width:1200px;
margin:0 auto;
background:url(http://gnula.nu/wp-content/uploads/2014/04/heada.jpg);
}
/* The Search */
.search {
height:29px;
padding:0px 25px 0 14px;
float: right;
}
.search form {
background:url(images/searchbg2.png);
width:210px;
height:29px;
padding-top:15px;
padding-left:17px;
}
.search input {
float:left;
}
.search input#s {
width:160px;
border:none;
background:#fff;
font-size:16px;
color:#444;
height:20px;
}
.search input#submit...