lofi ui

Low fidelity UI components built with @tailwindcss.
by @rob_stino

[lofi ui @lofiui]

Aiming to have a whole bunch of variations of these over the coming week or so.

[Rob Stinson @rob_stino]

#100DaysOfCode
Day 9 was a bunch of learning around @vuejs

Day 10 (today), first of a bunch of responsive navbar components I'm planning to build out.

Check out the first here on @codepen -> https://t.co/IwI1B2JMJ4

#CSS #tailwindcss #webdev

[lofi ui @lofiui]

😍

[Adam Wathan @adamwathan]

Finished building the first of several complete landing page examples for Tailwind UI this week 👀

Should be able to release these mid next week!

[lofi ui @lofiui]

First component for 2021!
A simple little to-do list UI with light + dark mode.

99% built with just @tailwindcss

@CodePen pen for you to checkout here -> https://t.co/bKvbnOaEcv

#CSS #webdev

[lofi ui @lofiui]

@_engineer_raps @TailwindcssBot It's magic ay!

[lofi ui @lofiui]

@HaxB123 @TailwindcssBot @tailwindcss Agreed! 😊

[lofi ui @lofiui]

@jaw_labs @TailwindcssBot @tailwindcss +1 for the headwind plugin for vs code

[Shruti Balasa @shrutibalasa]

Here are 10 reasons to start using @tailwindcss for your next project

#Tailwind #TailwindCSS

🧵Thread 👇

[lofi ui @lofiui]

The best way to learn is to lean in on someone else's (good) opinions.

[Taylor Facen @ItsTayFay]

It’s funny how now that I use @tailwindcss , I understand css WAAAAYYY more than when I had a million css files floating around my project.

[lofi ui @lofiui]

🏝Spent a couple weeks chilling.

🧐Couple weeks chilling = plenty of time to think and plan.

🚀Got some very cool things planned for 2021!

[lofi ui @lofiui]

And here's a side-by-side version. Almost the same markup with some flex-box variation.

@codepen pen -> https://t.co/LKPDgqvNnZ

[lofi ui @lofiui]

Here's something a little different.
A stacked column chart with only #HTML and #CSS

Thanks @tailwindcss for making this super easy.

@codepen snippet here if you wanna check it out. https://t.co/730FHWJLIg

[Asyraf Hussin @asyrafhussin4]

Pure CSS John Wick

@CodePen : https://t.co/rHph2N9R9C

[lofi ui @lofiui]

@Design__Pattern @TailwindcssBot @tailwindcss Accordions are notoriously difficult to pull off with vanilla CSS.
Here's a half-decent attempt with Tailwind. It's not perfect, but about as good as I can get it without relying on JS.
https://t.co/1K6sTNZYXx

[lofi ui @lofiui]

You can build some pretty cool interfaces with @tailwindcss!

Check this Project/Kanban board out on @CodePen
https://t.co/kBafhHmMsg

#CSS

[lofi ui @lofiui]

💜 Now with Indigo.
https://t.co/AOcegLZc9f

[lofi ui @lofiui]

Couple of variations on an app sidebar/menu.
Check out the pen and play along.

Built with @tailwindcss on @CodePen

https://t.co/AOcegLZc9f

[lofi ui @lofiui]

#CSS tip.
When styling buttons, don't use top/bottom padding. Use flex, a defined height, & align-items: center.
It's a little more code, but the explicit height gives you more control over how the button will interact with the elements around it. Padding can be a mixed bag.

[lofi ui @lofiui]

@malhotra_parul @Una @argyleink More like 2020 flex-wrapped.

[lofi ui @lofiui]

Responsive subscription checkout built with @tailwindcss and built on @CodePen

Check it out. Or should I say… check out the checkout! 🥁 https://t.co/ay892urCwn

#CSS #ecommerce

[lofi ui @lofiui]

A responsive products page for a Marketplace/eCommerce app. 🛍️
Built with @tailwindcss

@codepen pen right here for you to check out and play with -> https://t.co/q7F1rM2je1