Recreating the Messenger UI with Tailwind CSS - Suboptimal Clone #3

== [ Description ] == In this video, I go over how to clone the Messenger UI using Tailwind CSS. I explain how to add responsive UI and configure tailwind themes. This is the fourth of many Tailwind clones that I plan to release in the coming few weeks. I'm making this series to practice my UI/web design skills and explain some of the learnings along the way. So sit back, relax, and follow along as I give a code walkthrough of this Messenger clone.

Note: I made this Messenger clone within Vue.js, but no prior knowledge of the framework is required to follow along. I'd also suggest watching it at 1.25 or 1.5x speed.

== [ Socials ] == Twitter ▶ https://twitter.com/SuboptimalEng Github ▶ https://github.com/SuboptimalEng Blog ▶ https://suboptimaleng.github.io Subscribe ▶ https://youtube.com/SuboptimalEng?sub_confirmation=1

== [ Links ] == Tailwind CSS: https://tailwindcss.com/ Vue + Airbnb ESLint Setup Guide: http://youtu.be/gigc5XIb-BA Vue + Tailwind CSS Setup Guide: http://youtu.be/lazG_4uUXMY Vue + Font Awesome Setup Guide: http://youtu.be/MoDIpTuRWfM Customize Colors in Tailwind CSS: http://youtu.be/Zrqv1OX1A1I Dark Mode Toggle in Tailwind CSS: http://youtu.be/mOeIvKiZuzE

== [ Timestamps ] == 00:00 Messenger Clone Demo 00:55 Intro 01:20 Tailwind Setup + GitHub Template 02:33 Tailwind Project Layout 03:32 Messenger User Profile UI 10:56 Contacts UI 17:42 Current User Info UI 21:55 Send Message UI 25:27 Messages UI 29:24 Fin

== [ Tags ] == #suboptimal #tailwindcss #messengerclone