mertjf / tailblocks Goto Github PK
View Code? Open in Web Editor NEWReady-to-use Tailwind CSS blocks.
Home Page: https://tailblocks.cc
License: MIT License
Ready-to-use Tailwind CSS blocks.
Home Page: https://tailblocks.cc
License: MIT License
Right now the mobile preview of the Header templates doesnt look quite good. Can enhance by collapsing to a hamburger menu like the website itself has right now
Awesome work though!
Hi,
It's (generally) a bad idea to use placeholder acting as a label and this caught my eye on otherwise very nice templates. I know they look "sweet" with only placeholders but sacrifices usablity and teach bad habits.
IMO those inputs and textareas in those templates look sweet with only labels anyway :)
similar to https://tailwindcss.com/ - accesible via keyboard shortcut (eg "/") to quickly jump to blocks
Randomly stumbled across this and wow, incredible polished work. Any chance we could see some responsive tables in the future?
Hello @mertJF
awesome work! Thank you! I've noticed FAQ is missing piece for my project - just an idea in case you are interested in adding some more!
Peter
TailWindCss version 2 has introduced dark mode. Please add dark mode classes in all the blocks in tailblocks.
Hey, I'm using TailBlocks and I see most of the self closing elements doesn't have closing tags.
Take a look at input tags on here:
<section class="text-gray-700 body-font">
<div class="container px-5 py-24 mx-auto flex flex-wrap items-center">
<div class="lg:w-3/5 md:w-1/2 md:pr-16 lg:pr-0 pr-0">
<h1 class="title-font font-medium text-3xl text-gray-900">Slow-carb next level shoindcgoitch ethical authentic, poko scenester</h1>
<p class="leading-relaxed mt-4">Poke slow-carb mixtape knausgaard, typewriter street art gentrify hammock starladder roathse. Craies vegan tousled etsy austin.</p>
</div>
<div class="lg:w-2/6 md:w-1/2 bg-gray-200 rounded-lg p-8 flex flex-col md:ml-auto w-full mt-10 md:mt-0">
<h2 class="text-gray-900 text-lg font-medium title-font mb-5">Sign Up</h2>
<input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2 mb-4" placeholder="Full Name" type="text">
<input class="bg-white rounded border border-gray-400 focus:outline-none focus:border-indigo-500 text-base px-4 py-2 mb-4" placeholder="Email" type="email">
<button class="text-white bg-indigo-500 border-0 py-2 px-8 focus:outline-none hover:bg-indigo-600 rounded text-lg">Button</button>
<p class="text-xs text-gray-500 mt-3">Literally you probably haven't heard of them jean shorts.</p>
</div>
</div>
</section>
This is CTA#2 in tailblocks docs.
If you're busy I can do a reformat for the project, to add those as they are Standard and cause to many errors.
The preview html graphics for the leftside bar, how did you make them?
Did you use a library or service or did you make them my hand.
Thanks
it takes more than a seconds. and lags. it should me smooth.
Hello! I'm brand new to CSS-in-JS and Tailwind.
How does one use your blocks? Copy & paste?
Could be nice to have a "Copy as JSX" button alongside a "Copy as HTML" button.
Lines 301 to 315 in 2c32117
Happy to work on a PR if you're open to it.
Hi there, I really like this project & I'm using it actively in my new projects, but I noticed some accessibility issues that are easy to fix. I believe it can help anyone who is copying/pasting the blocks to have the appropriate accessibility tags & attributes.
Here is a screenshot from lighthouse audit on one of the pages.
And the other pages have similar issues that can be fixed by adding some attributes & tags.
The form doesn't have any labels.
It would be nice to have floating labels on them.
I love it - any chance for a chat window with scrollable messages ?
Not too important cause it is easy to find but just for ease of use. So you don't have to find it if you add it:
https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css
Didn't open a pull cause not sure how you want the Readme ordered, I just think this would be nice.
I tried both down arrow and tab but none of them worked. I expected to jump to see the next block.
Down arrow is already in use to slowly scroll down the list... so use tab and shift + tab to navigate.
This site is awesome. I use it all the time, and I need a way to pay you back.
Hi there, great collection of Tailwind blocks you've got, super work!
I have a request, and that's for a grouped avatar list. This could go into the Team collection.
These could be in a variety of styles (stacked, stacked truncated, grid) and most of these should be do-able with just Tailwind and potentially some custom CSS.
I've done something similar (using Vue, Vuetify) on CodePen, but this is about as far as I've been able to do:
https://codepen.io/scp-nm/pen/rNVKBVO
The bit that I'm struggling with is getting the stacked avatars to stack 'correctly', i.e. left-most avatar fully visible and then subsequent avatars under the left-most. I've seen this is possible by reversing the list of avatars and using CSS flex, but this seems a bit hacky to me.
Hopefully someone might be up for the challenge 😝
Thanks again for a great repo.
I dont know why , but i dont have the option to veiw code in
https://mertjf.github.io/tailblocks
Please make it available for those devices
I would love to contribute to this project but I can't seem to find a guide for contribution...
Eline emeğine sağlık hocam. Tailwindui ı satın aldım. İnanki adamlar senin kadar component sunmadılar. Update gelecek diye 30 gün bekliyoruz. 30 gün sonunda 2 tane header falan ekliyorlar projeye :) En son 6 mayısta guncellediler. Sonra, 1 hafta sonra tekrar guncelleme olacak dediler. 3 hafta geçti hala beklioruz.
Tek seferlik destek veya patreon linkin varsa, tailwindui ın discord grubunda paylasayim.
The 8d9fb27 commit doesn't work on Firefox. Works on Chrome.
Trying to add these blocks to a React project, I get complaints about the lack of closing tags.
This should be added by default as it is also a good HTML validation habit.
Before:
<br>
After:
<br/>
Also before:
<input className="w-full px-4 py-2 text-base bg-gray-100 border border-gray-400 rounded focus:outline-none focus:border-indigo-500" placeholder="Name" type="text">
After:
<input className="w-full px-4 py-2 text-base bg-gray-100 border border-gray-400 rounded focus:outline-none focus:border-indigo-500" placeholder="Name" type="text"/>
Hi,
I presume there will be additions and changes over time, can I suggest we number the blocks or something? Maybe add versioning as well?
So if we mention footer1-v2
, everyone is clear which footer we are talking about. Thank you for this great work!
Stuff link space-x, or grid to remove a lot of classes?
Tailblocks.cc returns a 404.
Would love to contribute to this one!
You have macros like title-font
and body-font
in your templates. Makes copy pasting into scss very hard since those doesn't exist in our templates.
Hey!
I think we don't have a Pagination bar available on the tail blocks.
Can someone add this to the codebase? Thanks!
<div class="border-2 border-gray-200 px-4 py-6 rounded-lg">
<div class="flex flex-row">
<a class="text-indigo-500 inline-flex items-center flex-grow">First</a>
<a class="text-indigo-500 inline-flex items-center flex-grow">Previous</a>
<a class="text-indigo-500 inline-flex items-center flex-grow">55</a>
<a class="text-indigo-500 inline-flex items-center flex-grow">Next</a>
<a class="text-indigo-500 inline-flex items-center">Last</a>
</div>
</div>
//Sivakumar
Would be nice to have pagination examples for content
In your website,
The code for dark and light mode is the same but somehow it changes the theme.
It would be cool if we could use that function to implement in the sites we build.
A toggle button which would change the themes.
Hi, I just stumbled upon this project from DesignCourse on YouTube (this project is about to get a lot more than 500 stars) and I love it.
One thing I think would be useful would be custom colors on the top menu.
Obviously there's a few reasons you might not do this:
The design of the website is simple. Keep it that way.
The colors go with the entire color scheme and aesthetic of tailwind/tailblocks.
A user can pick colors with no contrast, like colors that are too light / too dark.
Here are my answers:
Adding one button for a custom color picker wouldn't take up any measurable amount of UI space or complexity
You still default to the preferred colors, which is what most users will use in a pinch, but users will appreciate having the option to choose a custom color and preview it from within the website
While users can choose bad colors, you already handle light and dark mode, so determining the lightness of the color is easy and then you can easily implement from there (I believe, for the most part)
Thanks for listening to my advice and love the project :)
PS: Also consider adding an issue template for GitHub for when the project gets more popular :)
Do you plan adding mode complexity to navbars ?
By complexity I mean: Use a burger in responsive mode, dropdowns-on-hover, an "account like" exemple?
I realize those can lead to super opinionated choices, but it's often required in real world products.
No an issues, but as an aside... set up https://www.buymeacoffee.com/ or Patreon in your readme because this extension is worth at least a coffee!
Thanks for these components and the keep up the great work.
Is there a way to copy the code for this per page? Or how did you implement it
First of all, Great repo 🎉
Since this is meant as a copy paste solution for those who are looking for styling their websites, Links like "Learn More" and Icons which are meant to be clickable should be that way and the cursor on hover should show as pointer.
Hi,
The IMG tags are not properly closed when importing into CSS-in-JS. Since having <img src="..." />
is considered as acceptable HTML, why not use it as a standard? Thank you.
Tailwind component sites have little to no FAQ sections/blocks. This would be very helpful, especially if you add animations.
Thanks in advance, the site is great!
since you have a blog grid, it will be amazing if you hade a blog page layout
Really useful project. Where would I be able to find the icons used?
It would be nice to have one or two examples of nicely-styled 404 or error pages using Tailwind
Thanks for tail blocks, it is awesome to get a head start
Reflex is the building blocks for gatsby, check here https://github.com/reflexjs/reflex
can we have all these blocks easy to use in reflex?
I think it would make it even faster to develop with this approach
Correct me if I'm wrong, as your vision creating it may differ from mine.
Looking at the current components, looks like you have two version of every block, a dark and a light one. For you to make a change in one component, you actually have to change 2 files. For people using it and trying to use both themes, they have to implement some sort of theming.
I've recently created a plugin for creating themes for Tailwind, that I think you could benefit.
You can see it live here: https://tailwindcss-multi-theme.now.sh/
eg. This is the current blocks/cta/light/a.js
:
<section className="text-gray-700 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
<h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900">
Slow-carb next level shoindxgoitch ethical authentic, scenester
sriracha forage.
</h1>
<button className={`flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mt-10 sm:mt-0`}>
Button
</button>
</div>
</div>
</section>
Using the plugin, you would need only one file blocks/cta/a.js
(half the maintenance):
<!-- 👇 -->
<section className="text-gray-700 dark:bg-gray-900 body-font">
<div className="container px-5 py-24 mx-auto">
<div className="lg:w-2/3 flex flex-col sm:flex-row sm:items-center items-start mx-auto">
<!-- 👇 -->
<h1 className="flex-grow sm:pr-16 text-2xl font-medium title-font text-gray-900 dark:text-white">
Slow-carb next level shoindxgoitch ethical authentic, scenester
sriracha forage.
</h1>
<button className={`flex-shrink-0 text-white bg-${props.theme}-500 border-0 py-2 px-8 focus:outline-none hover:bg-${props.theme}-600 rounded text-lg mt-10 sm:mt-0`}>
Button
</button>
</div>
</div>
</section>
Note that it only adds dark
as a variant, so it doesn't require any new syntax, just plain old Tailwind CSS and would only be applied when .theme-dark
was present on a parent (or html
or body
), and could benefit from prefers-color-scheme
to auto apply themes based on user preference. *Also, your other theme props stay untouched.
If you're interested in how it works, you can visit the repo or ask me anything.
Is svg icons created by you?
The labels that details each pricing features is not shown on the Pricing 2
Can you please use Github "Releases" so I can subscribe only to it using "Releases only"?
I'm receiving many emails using the simple "Watch".
Thank you.
I thought it would be good to sort the parts in the common order (nav, hero, content, pricing, CTA and footer at the end) instead of alphabetical.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.