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,

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!

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.

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.

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.

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 :)

Would love to contribute to this one!

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.

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.

It would be nice to have one or two examples of nicely-styled 404 or error pages using Tailwind

Could be nice to have a "Copy as JSX" button alongside a "Copy as HTML" button.

Happy to work on a PR if you're open to it.

I would love to contribute to this project but I can't seem to find a guide for contribution...

since you have a blog grid, it will be amazing if you hade a blog page layout

I love it - any chance for a chat window with scrollable messages ?

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

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.

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.

Hello! I'm brand new to CSS-in-JS and Tailwind.

How does one use your blocks? Copy & paste?

It would be great if the code snippets had closing tags to

JSX doesn't allow unclosed tag!

similar to https://tailwindcss.com/ - accesible via keyboard shortcut (eg "/") to quickly jump to blocks

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.

Is svg icons created by you?

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.

Tailblocks.cc returns a 404.

Stuff link space-x, or grid to remove a lot of classes?

TailWindCss version 2 has introduced dark mode. Please add dark mode classes in all the blocks in tailblocks.

https://tailwindcss.com#dark-mode

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

The form doesn't have any labels.
It would be nice to have floating labels on them.

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!

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.

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.

What are the issues?

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.

Would be nice to have pagination examples for content

This site is awesome. I use it all the time, and I need a way to pay you back.

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.

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!

it takes more than a seconds. and lags. it should me smooth.

The 8d9fb27 commit doesn't work on Firefox. Works on Chrome.

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

Randomly stumbled across this and wow, incredible polished work. Any chance we could see some responsive tables in the future?

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

Really useful project. Where would I be able to find the icons used?

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.

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.

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

The labels that details each pricing features is not shown on the Pricing 2

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 :)

Hi,

Not sure if this was intentional. Thanks.

Is there a way to copy the code for this per page? Or how did you implement it

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"/>