JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<div id="a">A</div>
<div id="container">
    <div id="b">a bot that sends tweet replies pics of crying babies to people who tag their tweets w/ #gamergate

a snapchat bot that tweets banal inspirational quotes to you with inspiring stock photo images of white girls & sunsets

rap battle bots that just tweet at each other forever

a bot that’s a boot. a twitter boot.

a hater bot.
	(i have an unpublished bot that generates childish insults and calls u poop -- thrice) +2
	cool, would love to see it! -Miles

a bot connected to an irl slug, tweets “moving” or “not moving” periodically.

a bot connected to an irl slug. you can tweet “salt” to it.. doing so will salt the slug. ← )-:

a bot matchmaker for bots.
cf. @lightaesthetic’s @thebotmakers

a bot that heckles other bots for being basic 
fuccbot 

a bot that attempts to take MOOCs by asking other students to do their homework

alternatively.. basic bot, a bot that is basic. 
	a bot that tells jokes & then asks people to like their tweet

a bot that is actually a hamster running on a wheel that is scrolling down a tumblr feed. it reblogs whatever is in the middle of the screen whenever the hamster takes a break +2

a Kenneth Goldsmith bot that appropriates people’s tweets and calls it poetry.  +1 
	this is hilarious -maddy

a bot that checks your privilege. literally googles you and calculates your privilege quotient based on some criteria, tweets a number at you. 

a bot that responds to tweets with non-controversial statements w/ a “u mad?” macro attached +1

a twitter bot that steals your avatar for its own +1

A tumblr bot that makes really bad memes

A facebook bot that looks for passive aggressive posts (no named subject) and replies to them by asking why they’re posting stuff about (random celebrity).

A bot that replies to food photos with a calorie count. The calorie count is determined by image and any named ingredients or description.

A bot that reads old Farmer Almanacs and suggests planting/harvesting...

CSS

#container div, #a, #d {
  margin: 20px;
}

#container {
  display: flex;
  flex-flow: row-reverse nowrap;
  justify-content: flex-end;
  width: 650px;
  position:relative;
  top: -140px;
}

@media screen and (max-width: 699px) {
  #container div, #a, #d {
    width: 100% !important;
    max-width: 100%;
  }
  #container {
    flex-flow: column nowrap;
    min-height: 600px;
    top: initial;
  }
  #container div, #a {
    top: initial !important;
  }
  #d {
    top: -120px !important;
  }
}

#a{
  background-color: red;
  width: 200px;
  align-self: flex-start;
  min-height: 100px;
}
#b{
  background-color: blue;
  width: 400px;
  position: relative;
}
#c{
  background-color: green;
  height: auto;
  max-width: 220px;
  width: 200px;
  top: 120px;
  position: relative;
  margin-bottom: 140px !important;
}
#d{
  background-color: orange;
  width: 600px;
  height: 15vh;
  position:relative;
  top: -140px;
}