Ir al contenido principal

Estética para una aplicación web odontológica

De

 Diseñar una aplicación con una estética profesional y acorde a un consultorio odontológico, utilizando shadcn/ui y Tailwind CSS, es una gran manera de asegurar una interfaz limpia y funcional.


Notas Adicionales para una Apariencia Profesional:

  • Fuentes: Considera usar una fuente sans-serif limpia como "Inter", "Roboto", "Open Sans" o "Lato". Puedes importarlas desde Google Fonts o Bunny Fonts como ya vimos.

  • Espaciado Consistente: Utiliza la escala de espaciado de Tailwind (p-x, m-y, gap-z) de manera consistente en toda tu aplicación.

  • Iconografía: Integra iconos de librerías como lucide-react (que shadcn/ui utiliza) o Font Awesome para añadir claridad visual a los botones y elementos de navegación.

  • Estado de Focus: Asegúrate de que los estados de focus para los elementos interactivos (botones, inputs) sean claros y accesibles. Tailwind proporciona clases para esto (focus:outline-none, focus:ring).

  • Transiciones: Las transiciones suaves (transition-colors, duration-150) en los estados hover y focus añaden un toque pulido.

Esta tabla te proporciona una base sólida para estilizar tu aplicación de consultorio odontológico con un aspecto profesional y moderno, aprovechando la flexibilidad de Tailwind CSS y la estructura de shadcn/ui.


Lista de clases para la estética de la aplicación de consultorio odontológico.


¡Bienvenido a tu Consultorio!

Gestión profesional para tu práctica odontológica.

divflex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0flex w-full items-center justify-center opacity-100 transition-opacity duration-750 lg:grow starting:opacity-0Fondo de la Aplicacióndivbodybg-[#FDFDFC] text-[#1b1b18] font-sansdark:bg-[#0a0a0a] dark:text-[#EDEDEC] font-sansInterBarra de Navegación (Superior)navdivflexflex items-center justify-between p-4 bg-white shadow-sm border-b border-gray-200 rounded-b-lgdark:bg-[#1A202C] dark:border-gray-700 dark:shadow-mdLogo del Consultorioimgspanh-10 w-auto object-containh-10 w-auto object-containBotón Primario (Acción Principal)Buttoninline-flex items-center justify-center rounded-md px-6 py-3 text-base font-medium bg-[#00A896] text-white shadow-sm hover:bg-[#008F7E] focus:outline-none focus:ring-2 focus:ring-[#00A896] focus:ring-offset-2 transition-colors duration-200dark:bg-[#007366] dark:hover:bg-[#005C4F] dark:focus:ring-[#007366]Botón Secundario (Acción Menor)Buttoninline-flex items-center justify-center rounded-md px-5 py-2.5 text-base font-medium bg-gray-100 text-gray-800 border border-gray-300 shadow-sm hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2 transition-colors duration-200dark:bg-gray-700 dark:text-gray-200 dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:ring-gray-500Tarjeta de ContenidoCarddivbg-white rounded-lg shadow-md overflow-hidden border border-gray-200 p-6dark:bg-[#1A202C] dark:border-gray-700 dark:shadow-lgTítulo de Sección (dentro de tarjeta)h2text-2xl font-semibold text-gray-900 mb-4dark:text-whiteCampo de Formulario (Input)Inputflex h-10 w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#00A896] focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:placeholder:text-gray-500 dark:focus:ring-[#00A896]Etiqueta de Formulario (Label)labelblock text-sm font-medium text-gray-700 mb-1dark:text-gray-300Mensaje de Error de Formulariopspantext-sm text-red-600 mt-1dark:text-red-400Tabla de DatosTablew-full text-sm text-left text-gray-500 border-collapsedark:text-gray-400Encabezado de Tabla (<th>)TableHeaderthpx-6 py-3 bg-gray-50 text-xs font-medium text-gray-700 uppercase tracking-wider border-b border-gray-200dark:bg-gray-700 dark:text-gray-300 dark:border-gray-600Celda de Tabla (<td>)TableCelltdpx-6 py-4 whitespace-nowrap text-gray-800 border-b border-gray-200dark:text-gray-200 dark:border-gray-700Enlace de Navegación (Texto)Linkatext-[#007BFF] hover:underline transition-colors duration-150dark:text-[#66B3FF] dark:hover:underlinePaginación (Contenedor)divPaginationflex items-center justify-between mt-6 p-4 bg-white rounded-lg shadow-sm border border-gray-200dark:bg-[#1A202C] dark:border-gray-700 dark:shadow-mdBotón de PaginaciónButtoninline-flex items-center px-3 py-1.5 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-offset-2dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600Switch/ToggleSwitchdata-[state=checked]:bg-[#00A896] data-[state=unchecked]:bg-gray-200dark:data-[state=checked]:bg-[#007366] dark:data-[state=unchecked]:bg-gray-600Badge/Etiqueta (Estado)Badgeinline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium bg-blue-100 text-blue-800dark:bg-blue-800 dark:text-blue-100Separador (Línea)hrdivmy-6 border-t border-gray-200dark:border-gray-700Mensaje de Éxito (Toast/Banner)divp-4 rounded-md bg-green-50 text-green-800 border border-green-200dark:bg-green-900 dark:text-green-200 dark:border-green-700Mensaje de Error (Toast/Banner)divp-4 rounded-md bg-red-50 text-red-800 border border-red-200dark:bg-red-900 dark:text-red-200 dark:border-red-700Modal/Dialogo (Fondo Oscuro)DialogOverlayfixed inset-0 z-50 bg-black/80fixed inset-0 z-50 bg-black/80Modal/Dialogo (Contenido)DialogContentfixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-white p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lgdark:bg-[#1A202C] dark:border-gray-700

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Crear proyecto de frontend con Vite, React, Tailwind, Typescript y JSX

De
 ¿Cómo se crea un proyecto exclusivo de frontend con Vite, React, Tailwind, Typescript y JSX? ¡Absolutamente! Entiendo que quieres la guía completa para pasar de cero a tener un proyecto de frontend moderno, vacío y listo para ser llenado con tu código. A continuación, te proporciono un archivo de guía detallada que incluye todos los comandos necesarios para inicializar el proyecto, configurar Tailwind CSS, y los pasos clave para empezar a "poblarlo". Voy a generar un documento Markdown con la guía paso a paso, incluyendo los comandos de terminal y las modificaciones esenciales a los archivos de configuración. Guía: Creación de un Proyecto Frontend Puro (Vite, React, TypeScript, Tailwind) Este documento detalla el proceso para inicializar un proyecto de frontend vacío y optimizado, utilizando Vite como empaquetador, React como librería, TypeScript para tipado y Tailwind CSS para estilizado. 1. Inicialización del Proyecto con Vite Vite es la herramienta más rápida para emp...
Publicar un comentario
Leer más

Tokens V2

De
Tokens: Programme to discover tokens, where there are not. Now available at  https://puszcza.gnu.org.ua/projects/tokens/ This is Version 2, for  version 1, go here . Synopsis: use TokensV2; sub printFile; my @FORMAT = ( ['<Message Date=".*?" Time=".*?" DateTime=".*?" SessionID=".*?"><From>(?:<User FriendlyName=".*?"/>)+</From><To>(?:<User FriendlyName=".*?"/>)+</To><Text(?: Style=".*?")?>.*?</Text></Message>',   sub {     my $fh = $_[1];     my ($d, $t, $f, $s, $T) = $_[0] =~ m|<Message Date="(.*?)" Time="(.*?)" DateTime=".*?" SessionID=".*?">(<From>(?:<User FriendlyName=".*?"/>)+</From>)<To>(?:<User FriendlyName=".*?"/>)+</To><Text(?: Style="(.*?)")?>(.*?)</Text></Message>|;     my $F = join '<br />', ...
Publicar un comentario
Leer más

Perl Net::LDAP::SimpleServer

De
Adaptaciones sobre el módulo LDAP Server para Windows (Strawberry Perl) Lista de adaptaciones (continúa más abajo): - Relajación de condiciones de bind:     - Cuenta principal (principal account)     - Validación de contraseñas Ubicación del archivo: %Strawberry_Perl%\site\lib\net\ldap\SimpleServer\ProtocolHandler.pm CPAN: http://search.cpan.org/~russoz/Net-LDAP-SimpleServer-0.0.17/lib/Net/LDAP/SimpleServer.pm Código: package Net::LDAP::SimpleServer::ProtocolHandler; use strict; use warnings; # ABSTRACT: LDAP protocol handler used with Net::LDAP::SimpleServer our $VERSION = '0.0.17';    # VERSION use Net::LDAP::Server; use base 'Net::LDAP::Server'; use fields qw(store root_dn root_pw allow_anon); use Carp; use Net::LDAP::LDIF; use Net::LDAP::Util qw{canonical_dn}; use Net::LDAP::FilterMatch; use Net::LDAP::Constant (     qw/LDAP_SUCCESS LDAP_AUTH_UNKNOWN LDAP_INVALID_CREDENTIALS/,   ...
Publicar un comentario
Leer más