Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="chat">
	<div class="bubble mine">Hey there</div>
	<div class="bubble mine">My birthday is coming up soon and I'm giving a tiny party</div>
	<div class="bubble mine">Wanna come?</div>
	<div class="bubble theirs">Does a pope shit in the woods?! Of course I want to come. When is it?</div>
	<div class="bubble mine">26th of March</div>
	<div class="bubble mine">Around 8-ish</div>
	<div class="bubble theirs">Cool. That's a tuesday right?</div>
	<div class="bubble mine">Yep. We're just getting together for a bit. Drinks, presents and cake :)</div>
	<div class="bubble mine">My parents will be there</div>
	<div class="bubble mine">Just in case you need that info ;D</div>
	<div class="bubble theirs">Ah crap. I was gonna misbehave and start a fire and dance naked on the table. Good thing you warned me in advance</div>
	<div class="bubble theirs">lol</div>
	<div class="bubble mine">Right. So now you'll behave?</div>
	<div class="bubble mine">Guess not. as it's you.</div>
	<div class="bubble theirs">You never know ;)</div>
	<div class="bubble mine">We'll see then</div>
	<div class="bubble theirs">I guess we will.</div>
	<div class="bubble theirs">Expect the unexpected</div>
	<div class="bubble mine">Right</div>
	<div class="bubble theirs">Gotta go. Love you bro. Say hi to mom and dad.</div>
	<div class="bubble mine">LY2. Buh-bye</div>
</div>
              
            
!

CSS

              
                * {
	scrollbar-color: rgb(255, 143, 178) transparent;
	scrollbar-width: thin;
}

// code necessary to get the scrollbar to look as great in Blink browsers as it does in Firefox. :(
::-webkit-scrollbar {
		background: #fff;
		height: .6em;
    width: .6em;
}

::-webkit-scrollbar-track {
    background: #fff;
}

::-webkit-scrollbar-thumb {
	box-sizing: content-box;
	border-radius: 10px;
	border: 2px solid #eee;
	background: rgb(255, 143, 178);
}

body {
	background: #eee;
	box-sizing: border-box;
	display: flex;
	font-family: sans-serif;
	height: 100vh;
	padding: 1em;
}

.chat {
	align-items: flex-start;
	background: white;
	border-radius: 1em;
	box-shadow: 0 1em 1em rgba(0,0,0,0.05);
	display: flex;
	flex-direction:column;
	line-height: 1.4;
	max-height: calc(100vh - 4em);
	min-height: 50vh;
	min-width: 15em;
	margin: auto;
	overflow: auto;
	position: relative;
	padding: 1em;
	resize: both;
	// transform: translate(0,0); // sadly doesn't work.
}

.bubble {
	background: #eee;
	border-radius: .5em;
	margin-bottom: .25em;
	max-width: 30ch;
	padding: .5em 1em;
	pointer-events: none;
}

.theirs {
	border-radius: .5em .5em .5em 0;
	margin-bottom: 0.25em;
	& + .mine {
		margin-top: 0.5em;
	}
}

.mine {
	align-self: flex-end;
	background-color: rgb(255, 143, 178);
	background-image: linear-gradient(rgb(255, 143, 178) 0%, rgb(167, 151, 255) 50%, rgb(0, 229, 255) 100%);
	background-attachment: fixed;
	border-radius: .5em .5em 0 .5em;
	color: white;
	// You could play with these values to make it work in smaller windows. Facebook is already calculating that size so this shouldn't be too hard.
	// background-size: 100% 20em; // the size of the window
	// background-position: 10em 10em; // where the top left position of the window is
	// background-repeat: no-repeat; // don't repeat it cause it may look weird
	
	& + .theirs {
		margin-top: 0.5em;
	}
}
              
            
!

JS

              
                
              
            
!
999px

Console