Desktop design

Tablet design

Mobile design

Dictionary web app

<div class="space-y-[7px]"><h1 class="font-bold text-[32px] sm:text-[64px] leading-10 sm:leading-[67px]">keyboard</h1><div class="text-purple text-lg !leading-6 sm:text-2xl sm:!leading-[29px]">/ˈkiːbɔːd/</div></div>

<h3 class="sm:text-xl !leading-5 text-gray-500 mb-4">Meaning</h3>

<h3 class="sm:text-xl !leading-5 text-gray-500">Synonyms</h3>

<div class="flex flex-col sm:flex-row gap-2 sm:gap-[25px] mt-6"><span class="text-sm underline text-gray-500">Source</span><a href="https://en.wiktionary.org/wiki/keyboard" target="_blank">https://en.wiktionary.org/wiki/keyboard</a></div>

d94a.css"><link rel="prefetch" as="image" type="image/svg+xml" href="/_nuxt/logo.1ad79f67.svg"><link

9f67.svg"><link rel="prefetch" as="script" crossorigin="" href="/_nuxt/error-component.e75818e6.js"><link

pp</title><meta name="description" content="Frontend Mentor | Dictionary web app"><meta

web app"><meta name="keywords" content="dictionary"><meta

ctionary"><meta name="author" content="kevinndlc"><meta

evinndlc"><meta name="viewport" content="width=device-width, initial-scale=1"><link

-scale=1"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><!----

nly peer"><div class="relative w-10 h-5 rounded-full transition-colors peer-focus-visible:ring-1 after:content=[''] after:absolute after:w-3.5 after:aspect-square after:bg-white after:rounded-full after:top-[3px] after:left-[3px] after:transition-transform after:translate-x-0 peer-checked:after:translate-x-5 bg-gray-500 ring-gray-1000"></div>

Design comparison

Please log in to post a comment

Dictionary web app using Nuxt3 with TS, TailwindCSS and useFetch

Design comparison

Community feedback

Please log in to post a comment

Join our Discord community