This website is made with React, Next.js and Tailwind CSS. All the blog posts are written in Markdown - or actually MDX. The design is heavily inspired by the Tailwind CSS website and the greatest movie of all time - the 🐝 Bee Movie.

Below is a showcase/test of the design showing the styling of common tags and elements.

Headings

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

Paragraphs

This is a parapraph.

Emphasis

Text can be bold, italic or both

Blockqoute

This is a blockquote

Ordered list

1. First item
2. Second item
3. Third item
4. Fourth item

Unordered list

• First item
• Second item
• Third item
• Fourth item

Links

This is a link 🗿

Code

Code block

for i in range(1, 101):
  if i % 3 == 0 and i % 5 == 0:
    print('FizzBuzz')
  elif i % 3 == 0:
    print('Fizz')
  elif i % 5 == 0:
    print('Buzz')
  else:
    print(str(i))

Single file

for (let i; i < 101; i++) {
  if (i % 3 === 0 && i % 5 === 0) console.log('FizzBuzz')
  else if (i % 3 === 0) console.log('Fizz')
  else if (i % 5 === 0) console.log('Buzz')
  else console.log(i)
}

Multiple files

Inline code

Inline code like this npm i is-odd can also be used.

Images

Tables

Task Lists

• Write the press release
• Update the website
• Contact the media

Colors

Cards

Try swiping on the image stack to the right

Wow. It's a bee

Oh look. Another bee

Bees and flowers

Footnotes

Here’s a simple footnote,¹ and here’s a longer one.^bignote