Open Source
Preline Pro
Sign in
Get all access
Home
Examples
Templates
Pricing
Docs
Preline UI (Open Source)
Back to Examples
All examples
Trial Cards
Description goes here.
Chat Demo: Trial
Preview
Get the code
Existing accounts: Sign in to your account to access the source code.
<!DOCTYPE html> <html lang="en" dir="" class="relative um8nq qpmwn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>Preline UI</title> <link rel="shortcut icon" href="../../favicon.ico"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="../../assets/css/obfuscated.min.css"> </head> <body> <div class="ls9te i65bn pvqa8 mx-auto"><!-- Trial Card --> <div id="hs-pro-chrstc" class="flex flex-col oo8ro wfm4e d77gl lile3 dark:bg-neutral-800 dark:border-neutral-700"> <div class="yyez4"> <div class="x0zes flex uip67 items-center pgjbi"> <p class="f9qde vo20k t5ziw bp13m dark:text-neutral-200"> Trial ends in 7 days </p> <div class="-mt-1.5 -me-1.5"> <button type="button" class="flex r00n9 items-center vmt4s awhdl t5ziw xq1jm ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-remove-element="#hs-pro-chrstc"> <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> <span class="ecbnn">Dismiss</span> </button> </div> </div> <p class="c0yi4 f9qde e9qjd t6rrs dark:text-neutral-500"> Your free trial is expiring. Upgrade to Pro 🚀 </p> <!-- Progress --> <div class="dl93o flex i65bn e2wdw wfm4e d77gl oq0dt overflow-hidden dark:border-neutral-700" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <div class="flex flex-col r00n9 overflow-hidden jqqot cm336 zr4l6 lj7mp oq0dt lt27r dark:bg-blue-400" style="width: 60%"></div> </div> <!-- End Progress --> <button type="button" class="jlmh5 apc69 inline-flex items-center lialp ps5iq t5ziw wfm4e x1f8a rwtxm s3xiu disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden hl1n8 dark:border-blue-800 dark:bg-blue-800/20 dark:hover:bg-blue-800/40 dark:text-blue-500 dark:focus:bg-blue-800/40"> <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg> Schedule a call </button> </div> </div> <!-- End Trial Card --></div> <script src="../../assets/vendor/preline/dist/index.js?v=3.0.1"></script> </body> </html>
<!-- Trial Card --> <div id="hs-pro-chrstc" class="flex flex-col oo8ro wfm4e d77gl lile3 dark:bg-neutral-800 dark:border-neutral-700"> <div class="yyez4"> <div class="x0zes flex uip67 items-center pgjbi"> <p class="f9qde vo20k t5ziw bp13m dark:text-neutral-200"> Trial ends in 7 days </p> <div class="-mt-1.5 -me-1.5"> <button type="button" class="flex r00n9 items-center vmt4s awhdl t5ziw xq1jm ksr3h oq0dt disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden kf4z7 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:focus:bg-neutral-700 dark:hover:text-neutral-200 dark:focus:text-neutral-200" data-hs-remove-element="#hs-pro-chrstc"> <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg> <span class="ecbnn">Dismiss</span> </button> </div> </div> <p class="c0yi4 f9qde e9qjd t6rrs dark:text-neutral-500"> Your free trial is expiring. Upgrade to Pro 🚀 </p> <!-- Progress --> <div class="dl93o flex i65bn e2wdw wfm4e d77gl oq0dt overflow-hidden dark:border-neutral-700" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"> <div class="flex flex-col r00n9 overflow-hidden jqqot cm336 zr4l6 lj7mp oq0dt lt27r dark:bg-blue-400" style="width: 60%"></div> </div> <!-- End Progress --> <button type="button" class="jlmh5 apc69 inline-flex items-center lialp ps5iq t5ziw wfm4e x1f8a rwtxm s3xiu disabled:opacity-50 disabled:pointer-events-none focus:outline-hidden hl1n8 dark:border-blue-800 dark:bg-blue-800/20 dark:hover:bg-blue-800/40 dark:text-blue-500 dark:focus:bg-blue-800/40"> <svg class="hq6gx ibvs1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg> Schedule a call </button> </div> </div> <!-- End Trial Card -->
Subscribe
Get all the latest Preline updates and news.
All examples
Close
Close