JSFiddle - React, Tailwind, and code Playground

by andi msc

HTML

<div class="content">
      <h2>The basic bubble variants</h2>
      <p class="triangle-isosceles">This only needs one HTML element.</p>
      <p class="triangle-isosceles top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
      <p class="triangle-isosceles left">But it could be any element you want.</p>
      <p class="triangle-isosceles right">The entire appearance is created only with CSS.</p>
      <p class="triangle-right">This only needs one HTML element.</p>
      <p class="triangle-right top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
      <p class="triangle-right left">But it could be any element you want.</p>
      <p class="triangle-right right">The entire appearance is created only with CSS.</p>
      <p class="triangle-obtuse">This only needs one HTML element.</p>
      <p class="triangle-obtuse top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
      <p class="triangle-obtuse left">But it could be any element you want.</p>
      <p class="triangle-obtuse right">The entire appearance is created only with CSS.</p>
      <p class="triangle-border">This only needs one HTML element.</p>
      <p class="triangle-border top">For example, <code>&lt;p&gt;[text]&lt;/p&gt;</code>.</p>
      <p class="triangle-border left">But it could be any element you want.</p>
      <p class="triangle-border right">The entire appearance is created only with CSS.</p>


      <h2>Simple examples</h2>

      <h3 class="example-commentheading">125 comments</h3>

      <blockquote class="example-right">
        <p>Design is directed toward human beings. To design is to solve human problems by identifying them and executing the best solution.</p>
      </blockquote>
      <p>Ivan Chermayeff</p>

      <blockquote class="example-obtuse">
        <p>It’s not what you look at that matters, it’s what you see.</p>
      </blockquote>
      <p>Henry David Thoreau</p>

      <blockquote class="example-twitter"...

CSS

body {
  padding:0;
  margin:0;
  font:1em/1.4 Cambria, Georgia, sans-serif;
  color:#333;
  background:#fff;
}

a:link,
a:visited {
  border-bottom:1px solid #c55500;
  text-decoration:none;
  color:#c55500;
}

a:visited {
  border-bottom:1px solid #730800;
  color:#730800;
}

a:hover,
a:focus,
a:active {
  border:0;
  color:#fff;
  background:#c55500;
}

a:visited:hover,
a:visited:focus,
a:visited:active {
  color:#fff;
  background:#730800;
}

#container {
  width:500px;
  padding:0 0 50px;
  margin:0 auto;
}

h1 {
  margin:1em 0 0;
  font-size:2.5em;
  font-weight:normal;
  line-height:1.2;
  text-align:center;
}

h2 {
  margin:0.5em 0 1.5em;
  font-size:1.25em;
  font-weight:normal;
  font-style:italic;
  text-align:center;
}

p {
  margin:1em 0;
}

.content h2 {
  margin:2em 0 0.75em;
  font-size:2em;
  font-weight:bold;
  font-style:normal;
  text-align:left;
}

blockquote {
  margin:1em 0;
}

blockquote p {
  margin:0;
  font-size:2em;
}

.follow {
  clear:both;
  margin-top:2em;
  font-size:1.125em;
}

.follow span {
  font-weight:bold;
}


/*
 Should you want to set a background colour on a containing element
 certain types of bubble effect may require you to include these
 style declarations.
 */
.content {
  position:relative;
  z-index:1;
}


/* ============================================================================================================================
== BUBBLE WITH AN ISOCELES TRIANGLE
** ============================================================================================================================ */

/* THE SPEECH BUBBLE
------------------------------------------------------------------------------------------------------------------------------- */

.triangle-isosceles {
  position:relative;
  padding:15px;
  margin:1em 0 3em;
  color:#000;
  background:#f3961c; /* default background for browsers without gradient support */
  /* css3 */
  background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9d835), to(#f3961c));
 ...