Creating a Maker Widget with TailwindCSS

I recently built a Built with Django website to highlight projects that were built with Django. Made with Vue has been a great inspiration for me. One of the cool features on this website is the Maker widget. You can see that Armin and Melanie built this website.

MakerWidget

You can also see all their social links.

MakerWidget Extended

This is actually another project they made. They make it easy to create your own widget. Kudos.

Then I stumbled upon Makerrank built by Pieter Levels, where he made a similar widget with plain HTML & CSS.

Pieter Widget

I decided to go for simplicity and used Pieter’s “widget” as a template/inspiration and rebuilt it with TailwindCSS.

<a class="fixed bottom-0 right-0 z-10 px-2 py-1 font-semibold text-gray-900 no-underline bg-yellow-300 border-t border-l border-white border-solid rounded-tl-lg" href="#">
    <img class="inline w-4 align-middle rounded" src="{ link to your image }" alt="">
    <p class="inline m-0 ml-1 font-bold align-middle">by Rasul</p>
</a>

Widget by Rasul

You can use this on any website you have built. You can direct users to any link you would like. The cool think about this is that it can also be used as a Feedback button. This is useful because it is always there, users can always see it. Yet, it is not right in your face. You would simply need to change the link and the text. For the link, you can make a TypeForm to collect feedback.

Final Notes

You could combine the two widgets on one page. It will look something like this.

Double Widget by Rasul

You are a judge on this one. For me, this looks alright. Not great, just alright. Here is the code that will get you those:

 <a class="fixed bottom-0 right-0 z-10 px-2 py-1 font-semibold text-gray-900 no-underline bg-yellow-300 border-t border-l border-white border-solid rounded-tl-lg" href="#">
        <img class="inline w-4 align-middle rounded" src="{ link to your image }" alt="">
        <p class="inline m-0 ml-1 font-bold align-middle">by Rasul</p>
      </a>

      <a class="fixed bottom-0 left-0 z-10 px-2 py-1 font-semibold text-gray-900 no-underline bg-yellow-300 border-t border-r border-white border-solid rounded-tr-lg" href="#">
        <img class="inline w-4 align-middle rounded" src="{ link to your image }" alt="">
        <p class="inline m-0 ml-1 font-bold align-middle">Feedback</p>
      </a>

I hope that is useful.

Building the Widget

Final Notes

Tuesday Letter