<%@ Page Title="Tailwind-Inspired Theme" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" %>
<%@ Register Assembly="AjaxUploader" Namespace="AjaxUploader.Controls" TagPrefix="au" %> 
<asp:Content ID="TitleContent" ContentPlaceHolderID="TitleContent" runat="server">Tailwind-Inspired Theme - AjaxUploader v5.2 Demos</asp:Content>
<asp:Content ID="HeaderContent" ContentPlaceHolderID="HeaderTitle" runat="server">Tailwind-Inspired Theme</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
<div class="demo-card"> <div class="demo-card-header">Tailwind-Inspired Theme</div> <div class="demo-card-body"> <p class="demo-description"> Apply a Tailwind CSS-inspired look to AjaxUploader using custom CSS variables.
 No Tailwind dependency required - pure CSS variable overrides achieve the aesthetic.
 </p> <div class="demo-expect"><strong>What you should see:</strong> the control matched to a Tailwind design system using CSS variables, no utility classes inside the component.</div> <style> .tailwind-theme {
 --cu-primary: #3b82f6;
 --cu-primary-hover: #2563eb;
 --cu-primary-text: #ffffff;
 --cu-border-radius: 0.5rem;
 --cu-border-color: #e5e7eb;
 --cu-bg: #f9fafb;
 --cu-text: #111827;
 --cu-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
 --cu-font-size: 0.875rem;
 --cu-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
 --cu-padding: 0.75rem 1.25rem;
 --cu-progress-bg: #dbeafe;
 --cu-progress-fill: #3b82f6;
 --cu-success: #10b981;
 --cu-error: #ef4444;
 }
 .tailwind-theme .ajaxuploader-button {
 font-weight: 500;
 letter-spacing: 0.025em;
 box-shadow: var(--cu-shadow);
 transition: all 0.15s ease-in-out;
 }
 </style> <div class="tailwind-theme"> <au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Choose Files"
 ShowProgress="true" /> </div> <div class="code-panel"> <pre><code>&lt;style&gt;
 .tailwind-theme {
 --cu-primary: #3b82f6;
 --cu-primary-hover: #2563eb;
 --cu-border-radius: 0.5rem;
 --cu-border-color: #e5e7eb;
 --cu-bg: #f9fafb;
 --cu-font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
 --cu-shadow: 0 1px 3px rgba(0,0,0,0.1);
 --cu-success: #10b981;
 --cu-error: #ef4444;
 }
&lt;/style&gt;
&lt;div class="tailwind-theme"&gt;
 &lt;au:AjaxFileUpload ID="Uploader1" runat="server"
 AllowMultiple="true"
 ButtonText="Choose Files"
 ShowProgress="true" /&gt;
&lt;/div&gt;</code></pre> </div> </div>
</div> 
</asp:Content>
