JSFiddle - React, Tailwind, and code Playground

by montes28

HTML

<link rel="stylesheet" href="http://bootswatch.com/cosmo/bootstrap.css">
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container-fluid">
				<a class="btn btn-navbar" data-toggle="collapse" data-target=".top-nav.nav-collapse,.sidebar-nav.nav-collapse">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</a>
				<a class="brand"  href="/volcanicos/">MONITOREO VOLCANICO</a>
				
				
				<div>
				<!-- user dropdown starts -->
 <ul class="nav pull-right">
          <li class="dropdown">
            <a id="modulo" class="dropdown-toggle" href="#" data-toggle="dropdown">Iniciar Sesión <strong class="caret"></strong></a>
            <div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
              <form  action="index.php?controller=login_&accion=login_users" method="post" name="frm_login" id="myform1">
			  <input id="user_username" style="margin-bottom: 15px;" type="text" name="usuario" size="30" placeholder="usuario"/>
              <input name="clave" type="password"  id="clave" placeholder="contraseña"/>
              <input id="toggleBtnChbox"  style="float: left; margin-right: 10px;" type="checkbox"  name="" value="" />
             <label for="user_remember_me" class="string optional Estilo1">Ver Contraseña</label>
			 <a href="http://192.168.102.9/volcanicos/index.php?controller=user_&accion=recuperar_contrasena" >olvide mi contrasea</a>
			 <input class="btn btn-primary" id="iniciar" style="clear: left; width: 100%; height: 32px; font-size: 13px;" type="submit"name="commit" value="Iniciar Sesin" />
			 <br>
			 
			 <a href="http://192.168.102.9/volcanicos/index.php?controller=user_&accion=add_users_login">Deseo Registrarme</a>
		
   
</form>
            </div>
          </li>
		  </ul></div>
				<!-- user dropdown ends -->
				
				<div class="top-nav nav-collapse">
				  <ul class="nav">
				  <!--<li><a...

CSS

body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
	#div-1a {
    float:left;
	width:80%;
    /*width:700px;*/
	}
	#div-1b {
    float:left;
	width:10%;
    /*width:80px;*/
	}#div-1c {
    float:left;
	width:10%;
   /* width:80px;*/
	}
	  
@media print {
  #div-1a {
    float: left;
    width:80%;
  }
  #div-1b {
    float: left;
    width: 10%;
  }
   #div-1b {
    float: left;
    width: 10%;
  }
}

JavaScript

$(document).ready(function(){
$("#imprime").click(function (){
$.jPrintArea("#imprimir");
});
});

jQuery.jPrintArea=function(el)
{
var iframe=document.createElement('IFRAME');
var doc=null;
$(iframe).attr('style','position:absolute;width:0px;height:0px;left:-500px;top:-500px;');
document.body.appendChild(iframe);
doc=iframe.contentWindow.document;
var links=window.document.getElementsByTagName('link');
for(var i=0;i<links.length;i++)
if(links[i].rel.toLowerCase()=='stylesheet')
doc.write('<link type="text/css" rel="stylesheet" href="'+links[i].href+'"></link>');
doc.write('<div class="'+$(el).attr("class")+'">'+$(el).html()+'</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
doc.write("");
document.body.removeChild(iframe);
}