JSFiddle - React, Tailwind, and code Playground

by evgkch

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://use.edgefonts.net/lato:n1,n4:default;arimo:n4:default.js"></script>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="partbuster.css" rel="stylesheet" type="text/css">
    <link href="media-queries.css" rel="stylesheet" type="text/css">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
		  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
		  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
		<![endif]-->
    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.-->
    <script src="http://use.edgefonts.net/lato:n1,n4:default;arimo:n4:default.js" type="text/javascript"></script>
    <script src="jQueryAssets/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="Untitled-1.js" type="text/javascript"></script>
  </head>

  <body style="padding-top: 70px">

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
    <script src="js/bootstrap.js"></script>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped...

CSS

@charset "UTF-8";
body {
  font-family: lato;
  font-style: normal;
  font-weight: 400;
  background-color: #f3f3f3;
  color: #434343;
}
.navbar {
  background-color: #2c3e50;
}

#atom {
  margin-left: 10px;
  margin-right: 10px;
  border: 1px solid #d9d9d9;
  border-top: 5px solid #d9d9d9;
}

#atom .topField {
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  margin-bottom: 15px;
}

#info table {
  float: left;
}

#info td,
#in td,
#out td:first-child {
  height: 40px;
}

#info #partNumber {
  font-size: x-large;
  color: #6aa84f;
}

#info #manufactured {
  font-size: large;
  color: #6aa84f;
}

#info td#description {
  font-size: 9pt;
}

#info #description a {
  font-size: 9pt;
  color: #3D576F;
  text-decoration: none;
}

#info #description a:hover {
  text-decoration: underline;
}

#in table {
  float: right;
}

#in td {
  width: 50%;
  margin-right: auto;
  color: #3D576F;
  vertical-align: middle;
}

#in tr td:first-child {
  font-size: 9pt;
  text-align: right;
}

#in tr td:nth-child(2) {
  text-align: center;
  font-weight: bold;
  color: #3D576F;
}

#in input#qty1 {
  width: 70px;
  height: 40px;
  text-align: center;
  font-size: large;
  font-weight: bold;
  color: #3D576F;
  transition: 0.5s;
  border: 1px solid #d9d9d9;
  -moz-appearance: textfield;
}

#in input#qty1::-webkit-inner-spin-button {
  display: none;
}

#in input#qty1:focus {
  background-color: #2c3e50;
  outline: none;
  border-color: #2c3e50;
  color: white;
}

#out table {
  border: 1px solid #d9d9d9;
  background-color: white;
  width: 155px;
  height: 120px;
  float: right;
}

#out table#dark {
  border: 1px solid #d9d9d9;
  background-color: #2c3e50;
}

#out td {
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}

#out tr:first-child td {
  font-size: 9pt;
  color: #3D576F;
}

#out tr:nth-child(2) {
  font-size: x-large;
  font-weight: bold;
  color: #6aa84f;
}

.descriptionTable {
  display: none;
  background-color: white;
  padding:...

JavaScript

var accordion = function() {
  $('#test').click(function() {
    $('#fulldescription1').slideToggle();
    var test = $('#test').text();
    $('#test').text(
      test == "(more...)" ? "(less...)" : "(more...)");
  });
};
$(document).ready(accordion);

$('#qty1').keyup(function() {
  var qty = $(this).val();
  if (qty > 10000) {
    $('#forQty1').text(10000);
    $('#out table').addClass("#out table#dark")
  } else if (qty < 1) {
    $('#forQty1').text(1);
  } else {
    $('#forQty1').text(qty);
  };

  if (qty < 10) {
    $('#offers1 table tbody tr td').css("color", "black");
  } else if (qty >= 10 && qty < 100) {
    $('#offers1 table tbody tr td').css("color", "black");
    $('#offers1 table tbody tr td:nth-child(5)').css("color", "#d9d9d9");
  } else if (qty >= 100 && qty < 1000) {
    $('#offers1 table tbody tr td').css("color", "black");
    $('#offers1 table tbody tr td:nth-child(5)').css("color", "#d9d9d9");
    $('#offers1 table tbody tr td:nth-child(6)').css("color", "#d9d9d9");
  } else if (qty >= 1000 && qty < 10000) {
    $('#offers1 table tbody tr td').css("color", "black");
    $('#offers1 table tbody tr td:nth-child(5)').css("color", "#d9d9d9");
    $('#offers1 table tbody tr td:nth-child(6)').css("color", "#d9d9d9");
    $('#offers1 table tbody tr td:nth-child(7)').css("color", "#d9d9d9");
  } else if (qty >= 10000) {
    $('#offers1 table tbody tr td:nth-child(5)').css("color", "#d9d9d9");
    $('#offers1 table tbody tr td:nth-child(6)').css("color", "#d9d9d9");
    $('#offers1 table tbody tr td:nth-child(7)').css("color", "#d9d9d9");
    $('#offers1 table tbody tr td:nth-child(8)').css("color", "#d9d9d9");
  };

});