JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<h1>Speech Bubbles With 100% CSS </h1>
        <blockquote id="one">
            <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
             ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
             ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
        </blockquote>

        <blockquote id="two">
            <p>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
             ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
             ullamco laboris nisi ut aliquip ex ea commodo consequat. 
            </p>
             <span class="arrow" />
        </blockquote>

CSS

blockquote {
             margin: 0 0 50px 0; padding: 0;
        }

        blockquote#one {
             width: 250px;
            background: #e3e3e3;
            padding: 25px;
            position: relative;
        }

        #one .arrow {
             width: 0; 
             height: 0;
             line-height: 0;
             border-top: 30px solid #e3e3e3;
             border-left: 60px solid white;
             border-right: 10px solid white;
             position: absolute;
             bottom: -30px;
             right: 30px;
        }
        blockquote#two {
             width: 250px;
            background: #e3e3e3;
            padding: 25px;
            position: relative;
        
        }

        blockquote#two .arrow {
             width: 0;
            height: 0;
            line-height: 0;
            border-top: 40px solid #e3e3e3;
            border-left: none;
            border-right: 30px solid white;
            position: absolute;
            bottom: 60%;
            right: -30px;
        }

JavaScript

$('blockquote#one').append('<span class="arrow" />');