Inspired by a video of Adam Wathan, Tailwind’s co-creator, rebuilding Coinbase’s admin interface, I decided to get familiar with this funky little framework by digging in to a few interfaces myself. As you can tell by the examples below, this quickly got out of control.

I limited myself to the default CDN version and only gave myself a few hours for each. Please keep in mind this time limit means some of the code might make you cry, and some attempts lack proper mobile-friendly versions. This not only proved to be a great way of learning the ropes with Tailwind, but also of understanding — and sometimes questioning — the design decisions that went into making these interfaces.

I am in no way affiliated with or endorsed by any of the fine companies that make this great stuff. I’m just a fan with far too much time on his hands.

Examples

Craft CMS

Entry Title
Current
Live Preview
Share
Add Asset
Heading 1 Heading 2
Add a row
Block
  • Slug
  • Parent
    Choose
  • Post Date12/02/189:28 am
  • Expiry Date
  • Enabled
  • Created at2/11/2018, 9:21 AM
  • Updated at2/11/2018, 9:22 AM

Slack

#general
27,483
666
This is a good channel topic.
# general

You created this channel on the 12th of February, 2018. This is the very beginning of the # general channel.


February 12th, 2018
Ben11:36 AM joined #general along with 83 others.

February 13th, 2018
Ben7:59 PM @ben 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.

Safari

  • Ben Something
  • Tailwind CSS - A Utility-First CSS Framework for Rapid UI Development
  • reddit: the front page of the internet

Photoshop

  • Photoshop CC
  • File
  • Edit
  • Image
  • Layer
  • Type
  • Select
  • Filter
  • 3D
  • View
  • Window
  • Help
Layer
3D Mode:

Twitter

Benjamin @bensomething • 7 Apr 2014
I love the smell of nip balm in the morning.
Benjamin @bensomething • 8 Dec 2013
I’d sleep pretty soundly if I was the person who came up with the name “The Drum Cartel”.
Benjamin @bensomething • 22 Oct 2013
I don’t want to buy any of your paintings, Brad, but I do want to see a dog wearing your false teeth.
Benjamin @bensomething • 17 Feb 2013
“Hey! Ho! Let’s mow!” — Pretty good slogan for a Ramones-themed garden maintenance company.
Benjamin @bensomething • 17 Feb 2013
House party. “Who invited that unit?” [Canned laughter.]
Who to followRefreshView all
London TrendsChange

iOS 11

BS
11:27 am
Groups
Contacts
Ben Smith
My Number: +00 1234 567890
A
  • Alan Alda
  • Arnold Schwarzenegger
  • Amber Heard
  • Anthony Hopkins
  • Alex Winter (Excellent)
  • Amy Adams
  • Al Pacino
  • Anjelica Huston
  • A
  • B
  • C
  • D
  • E
  • F
  • G
  • H
  • I
  • J
  • K
  • L
  • M
  • N
  • O
  • P
  • Q
  • R
  • S
  • T
  • U
  • V
  • W
  • X
  • Y
  • Z
  • #
Favourites
Recents
Contacts
Keypad
Voicemail
BS
11:27 am
Sunday 23 September
For You
Music Chill Mix
Music Chill Mix
Recently Played
See All
Never Gonna Give You Up
Library
For You
Browse
Radio
Search
BS
11:27 am
1,000
AC
/
%
÷
7
8
9
×
4
5
6
1
2
3
+
0
.
=