Components using Tailwind

These are examples of React Components created by us using

Tailwind CSS

without using component libraries (e.g.

Tailwind UI

or

shadcn/ui

). This is not a component library we have created for others to use. There are other well established libraries that would be more appropriate for that task.

This is a simple demonstrations of components created by ourselves. It is by no means an extensively featured toolset as you may find in one of the many Tailwind component libraries on the market. It is just to show that we can create our own bespoke UI to reflect a brand and client needs. This is the point we are making here about using Tailwind.

Indeed, this site is constructed mostly using Tailwind as the styling tool.

If you are not concerned so much about unique branding and want a faster solution, you could use one of the component libraries mentioned above or alternative libraries like

Material UI/MUI

, which uses its own propriety method of styling components. We are very familiar with Material UI as the predecessor to this site, was originally developed using it until we redeveloped this current site using Tailwind CSS.

There is no reason why you can't use both. Material UI does actually work

with Tailwind

.

Bouncy buttons

You may be curious to how we produced the bouncy effects of all the buttons and links all over this site. We have created our own components to do this efficiently.

Here is an example:

A link to google

, and here's what the React component looks like:

<InlineLink href="https://www.google.com" target="_blank">
  A link to google
</InlineLink>

In turn, the InlineLink component wraps another component, 'InlineClickable', in a

Next Link Component

, that looks like this:

<Link href={href} target={target}>
  <InlineClickable>{children}</InlineClickable>
</Link>

... and this is what InlineClickable, where the boucy magic happens, looks like:

<div className="inline-block group">
  <div className="group-hover:animate-bounce ..." >
    {icon && (
      <div className="..." >
        {icon}
      </div>
    )}
    {children}
  </div>
</div>

The bounce effect is achieved using the Tailwind CSS out of the box

'animate-bounce'

utility class.

A similar pattern is used for other parts of this site, like the Nav menu buttons.