<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Chatvia - Responsive Chat App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="Chatvia - Responsive Chat App in HTML. A fully featured HTML chat messenger template., TailwindCSS chat application." name="description" />
<meta name="keywords" content="Chatvia chat template, chat, web chat template, TailwindCSS, chat app, chat status, chat template, communication, discussion, group chat, message, messenger template, status, TailwindCSS v5.3.0"/>
<meta content="Themesbrand" name="author" />
<link rel="shortcut icon" href="images/favicon.ico">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Sarabun:400,500,600,700|Rubik:300,400,500" rel="stylesheet">
<!--Material Icon -->
<link rel="stylesheet" type="text/css" href="https://cdn.materialdesignicons.com/4.7.95/css/materialdesignicons.min.css" />
<!-- TailwindCSS Css-->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<!-- Custom Css -->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/colors/red.css">
</head>
<body data-spy="scroll" data-target="#data-scroll" data-hijacking="on" data-animation="scaleDown">
<!-- STRAT NAVBAR -->
<nav class="sticky navbar navbar-expand-lg fixed-top navbar-custom sticky-dark">
<div class="container-fluid">
<!-- LOGO -->
<a class="navbar-brand logo text-uppercase" href="index.html">
<img src="images/logo.png" alt="logo" height="20" />
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<i class="mdi mdi-menu"></i>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="ml-auto navbar-nav navbar-center" id="mySidenav">
<li class="nav-item">
<a href="docs/index.html" class="nav-link" target="_blank">Docs</a>
</li>
<li class="nav-item active">
<a href="index.html#demos" class="nav-link">Layouts</a>
</li>
<li class="nav-item">
<a href="index.html#features" class="nav-link">Features</a>
</li>
<li class="nav-item">
<a href="index.html#more-versions" class="nav-link">More Versions</a>
</li>
<li class="nav-item">
<a href="https://1.envato.market/chatvia-tailwind-css-chat-app-support" target="_blank" class="nav-link">Support</a>
</li>
<li class="nav-item">
<a href="index.html#contact" class="nav-link">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- END NAVBAR -->
<!--START HOME-->
<section class="section bg-home home-half" id="home" data-image-src="images/bg-home.jpg">
<div class="bg-overlay"></div>
<div class="container-fluid">
<div class="row">
<div class="text-center text-white col-lg-8 offset-lg-2">
<h4 class="home-small-title">CHAT APP</h4>
<h1 class="home-title font-weight-light"><b>Chatvia </b> - Chat App Template</h1>
<p class="mx-auto padding-t-15 home-desc">Chatvia is built with <b>TailwindCSS</b> in HTML, css with responsive with all devices and supported with Dark, light, RTL modes. You can change mode very quickly by doing a single change. It has many features like one to one chat, group chat, contact, send files, online users, read and unread new messages from users, authentication pages and many more.</p>
<p class="mb-5 margin-t-30">
<a href="https://1.envato.market/chatvia-tailwind-css-chat-app" target="_blank" class="btn btn-custom waves-effect waves-light"><i class="mr-1 mdi mdi-cart"></i> Purchase Now</a>
</p>
</div>
</div>
</div>
</section>
<!--END HOME-->
<!--START DEMOS-->
<section class="section bg-light" id="demos">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-8">
<h1 class="text-center section-title">Choose Demos</h1>
<div class="section-title-border margin-t-20"></div>
<p class="text-center section-subtitle text-muted padding-t-30 font-secondary">Chatvia - is beautifully crafted. clean, professional and modern designed chat app template in Light, Dark and RTL versions.</p>
</div>
</div>
<div class="mt-4 row justify-content-center">
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/index.html" target="_blank">
<img src="images/demo/light.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Light</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/index-dark.html" target="_blank">
<img src="images/demo/dark.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Dark </h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/index-rtl.html" target="_blank">
<img src="images/demo/rtl.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>RTL</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/index-dark-rtl.html" target="_blank">
<img src="images/demo/dark-rtl.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Dark RTL</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/index-color.html" target="_blank">
<img src="images/demo/color.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Color Switcher</h4>
</div>
</div>
</div>
</div>
</section>
<!--START DEMOS -->
<!--START DEMOS-->
<section class="section" id="demos">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-8">
<h1 class="text-center section-title">Authentication Page</h1>
<div class="section-title-border margin-t-20"></div>
<p class="text-center section-subtitle text-muted padding-t-30 font-secondary">Chatvia - is beautifully crafted. clean, professional and modern designed chat app template in Light, Dark and RTL versions.</p>
</div>
</div>
<div class="mt-4 row justify-content-center">
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/auth-login.html" target="_blank">
<img src="images/demo/login.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Log In</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/auth-register.html" target="_blank">
<img src="images/demo/signup.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Sign Up</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/auth-recoverpw.html" target="_blank">
<img src="images/demo/recover-password.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Recover Password</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="layouts/auth-lock-screen.html" target="_blank">
<img src="images/demo/lock-screen.png" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Lock Screen</h4>
</div>
</div>
</div>
</div>
</section>
<!--START DEMOS -->
<!--START SERVICES-->
<section class="section" id="features">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<h1 class="text-center section-title">Key Features</h1>
<div class="section-title-border margin-t-20"></div>
<p class="text-center section-subtitle text-muted padding-t-30 font-secondary">Chatvia - Chat App Template is easily customizable and developer-friendly codes.</p>
</div>
</div>
<div class="row margin-t-30">
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-bootstrap text-custom"></i>
<div class="ml-4 media-body">
<h4>Built with TailwindCSS</h4>
<p class="pt-2 text-muted">Chatvia has the pure TailwindCSS native look and feels with responsive design.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-devices text-custom"></i>
<div class="ml-4 media-body">
<h4>Fully Responsive</h4>
<p class="pt-2 text-muted">Fully responsive with all devices layout using tailwindcss's latest version.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-web text-custom"></i>
<div class="ml-4 media-body">
<h4>Cross Browser</h4>
<p class="pt-2 text-muted">Chatvia is fully compatible with Cross-browser.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-sass text-custom"></i>
<div class="ml-4 media-body">
<h4>CSS Support</h4>
<p class="pt-2 text-muted">Chatvia is supported with CSS based admin and dashboard template.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-lifebuoy text-custom"></i>
<div class="ml-4 media-body">
<h4>1 Day Support </h4>
<p class="pt-2 text-muted">We are providing quick support to all the clients.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-file-document-box-outline text-custom"></i>
<div class="ml-4 media-body">
<h4>Well Documentation</h4>
<p class="pt-2 text-muted">We have added clean and easily understandable Documentation to setup it without any errors.</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-theme-light-dark text-custom"></i>
<div class="ml-4 media-body">
<h4>Dark, Light & RTL Layouts </h4>
<p class="pt-2 text-muted">Choose a perfect layout for your next app.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-tune text-custom"></i>
<div class="ml-4 media-body">
<h4>Easy Customization</h4>
<p class="pt-2 text-muted">All the components are reusable and easy to customize it as needs.</p>
</div>
</div>
</div>
</div>
<div class="col-lg-4 margin-t-20">
<div class="services-box">
<div class="media">
<i class="mdi mdi-update text-custom"></i>
<div class="ml-4 media-body">
<h4>Lifetime Free Updates</h4>
<p class="pt-2 text-muted">No need to pay any more to get updated versions in future.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--START SERVICES-->
<!--START VERSION-->
<section class="section bg-light" id="more-versions">
<div class="container-fluid">
<div class="row justify-content-center">
<div class="col-lg-8">
<h1 class="text-center section-title">Also Available in</h1>
<div class="section-title-border margin-t-20"></div>
<p class="text-center section-subtitle text-muted padding-t-30 font-secondary">You can also buy Reactjs, Nodejs Socket.io, Angular 16, Vuejs and Laravel Pusher versions separately. Click on the below screenshot to check more details of the specific version.</p>
</div>
</div>
<div class="mt-4 row justify-content-center">
<div class="col-lg-4">
<div class="demo-box">
<a href="https://1.envato.market/chatvia-react" target="_blank">
<img src="images/01_chatvia-react.jpg" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>React</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="https://1.envato.market/chatvia-node" target="_blank">
<img src="images/01_chatvia-node.jpg" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Node Socket</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="https://1.envato.market/chatvia-angular" target="_blank">
<img src="images/01_chatvia-angular.jpg" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Angular 16</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="https://1.envato.market/chatvia-vue" target="_blank">
<img src="images/01_chatvia-vuejs.jpg" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>VueJs</h4>
</div>
</div>
<div class="col-lg-4">
<div class="demo-box">
<a href="https://1.envato.market/chatvia-laravel" target="_blank">
<img src="images/01_chatvia-laravel.jpg" alt="demo-img" class="mx-auto img-fluid d-block">
</a>
<h4>Laravel Pusher</h4>
</div>
</div>
</div>
</div>
</section>
<!--END VERSION-->
<!--START WEBSITE-DESCRIPTION-->
<section class="section bg-web-desc">
<div class="bg-overlay"></div>
<div class="container">
<div class="row">
<div class="text-center col-lg-12">
<h2 class="text-white">Build your Chat App today</h2>
<p class="mx-auto padding-t-15 home-desc text-white-50">Purchase Chatvia to get a fresh start with your new project.</p>
<a href="https://1.envato.market/chatvia-tailwind-css-chat-app" target="_blank" class="btn btn-custom margin-t-30 waves-effect waves-light"><i class="mr-1 mdi mdi-cart"></i> Buy Now</a>
</div>
</div>
</div>
</section>
<!--END WEBSITE-DESCRIPTION-->
<!--START TESTIMONIAL-->
<section class="section bg-light" id="testi">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<h1 class="text-center section-title">What Our Clients says</h1>
<div class="section-title-border margin-t-20"></div>
<p class="text-center section-subtitle text-muted font-secondary padding-t-30">We are developing the best quality and code which is speedup to develop any Admin Dashboard application.</p>
</div>
</div>
<div class="row margin-t-50">
<div class="col-lg-4">
<div class="testimonial-box margin-t-30">
<div class="p-4 testimonial-decs">
<img src="images/envato.png" alt="" class="mx-auto mb-4 img-fluid d-block img-thumbnail rounded-circle">
<div class="p-1">
<h5 class="mb-3 text-center text-uppercase">sreeks456 <span class="text-muted text-capitalize"></span></h5>
<p class="mb-0 text-center text-muted">“Amazing template, Redux store and components is nicely designed. It's a great start point for an admin based project. Clean Code and good documentation.” </p>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="testimonial-box margin-t-30">
<div class="p-4 testimonial-decs">
<img src="images/envato.png" alt="" class="mx-auto mb-4 img-fluid d-block img-thumbnail rounded-circle">
<div class="p-1">
<h5 class="mb-3 text-center text-uppercase">hdemirbilek <span class="text-muted text-capitalize"></span></h5>
<p class="mb-0 text-center text-muted">“Unbelievably extensive functionality.Probably the last admin panel you'll ever need.<br/> Good job guys!.” </p>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="testimonial-box margin-t-30">
<div class="p-4 testimonial-decs">
<img src="images/envato.png" alt="" class="mx-auto mb-4 img-fluid d-block img-thumbnail rounded-circle">
<div class="p-1">
<h5 class="mb-3 text-center text-uppercase"> hrsh_ptl <span class="text-muted text-capitalize"></span></h5>
<p class="mb-0 text-center text-muted">“The best admin template with Perfect Design and Code Quality. Keep up the great work! Highly recommended.” </p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--END TESTIMONIAL-->
<!-- CONTACT FORM START-->
<section class="section " id="contact">
<div class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2">
<h1 class="text-center section-title">Get In Touch</h1>
<div class="section-title-border margin-t-20"></div>
<p class="text-center section-subtitle text-muted font-secondary padding-t-30">Support Working time is Monday to Friday from 10:00 AM to 6:00 PM IST. The estimated ticket and answer review time is 1 business day. Please make sure to read the theme's DOCUMENTATION before opening the support ticket. Support DOES NOT include theme customization, installation or any third party software and plugins.
</p>
</div>
</div>
<div class="row justify-content-center">
<div class="col-lg-8">
<div class="pt-4 mt-4 custom-form">
<div id="message"></div>
<form method="post" action="https://themesbrand.com/chatvia-tailwind/php/contact.php" name="contact-form" id="contact-form">
<div class="row">
<div class="col-lg-6">
<div class="mt-2 form-group">
<input name="name" id="name" type="text" class="form-control" placeholder="Your name*" >
</div>
</div>
<div class="col-lg-6">
<div class="mt-2 form-group">
<input name="email" id="email" type="email" class="form-control" placeholder="Your email*" >
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="mt-2 form-group">
<input type="text" class="form-control" id="subject" placeholder="Your Subject.." />
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="mt-2 form-group">
<textarea name="comments" id="comments" rows="4" class="form-control" placeholder="Your message..."></textarea>
</div>
</div>
</div>
<div class="row">
<div class="text-right col-lg-12">
<input type="submit" id="submit" name="send" class="submitBnt btn btn-custom" value="Send Message">
<div id="simple-msg"></div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
<!-- CONTACT FORM END-->
<!--START FOOTER ALTER-->
<div class="footer-alt">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="float-left pull-none">
<p class="mb-3 copy-rights text-muted mb-sm-0"><script>document.write(new Date().getFullYear());</script> © Chatvia - <a href="https://themesbrand.com/" class="text-reset" target="_blank">Themesbrand.com</a> </p>
</div>
<div class="float-right pull-none ">
<ul class="m-0 list-inline social">
<li class="list-inline-item"><a href="https://www.facebook.com/themesbrand" target="_blank" class="social-icon"><i class="mdi mdi-facebook"></i></a></li>
<li class="list-inline-item"><a href="https://twitter.com/ThemesBrand" target="_blank" class="social-icon"><i class="mdi mdi-twitter"></i></a></li>
<li class="list-inline-item"><a href="https://www.linkedin.com/in/themesbrand/" target="_blank" class="social-icon"><i class="mdi mdi-linkedin"></i></a></li>
<li class="list-inline-item"><a href="https://www.behance.net/themesbrand" target="_blank" class="social-icon"><i class="mdi mdi-behance"></i></a></li>
<li class="list-inline-item"><a href="https://dribbble.com/Themesbrand" target="_blank" class="social-icon"><i class="mdi mdi-dribbble"></i></a></li>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!--START FOOTER ALTER-->
<div class="footer-btn-group">
<a href="index.html" class="mr-3 footer-btn btn btn-success d-none" target="_blank">Suggestions</a>
<a href="https://docs.google.com/forms/d/e/1FAIpQLSfiP9bDHzIQdQoMXFrYvJx00wyFzSu_cqBWP0N0uUHpqjrbzQ/viewform" class="footer-btn btn" target="_blank">Hire Us</a>
</div>
<!-- JAVASCRIPTS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/scrollspy.min.js"></script>
<!-- Sticky Header -->
<script src="js/jquery.sticky.js"></script>
<!-- Waves Effect js -->
<script src="js/waves.min.js"></script>
<!-- Magnific Popup -->
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/app.js"></script>
<!-- Start of Async Drift Code -->
<script>
"use strict";
!function() {
var t = window.driftt = window.drift = window.driftt || [];
if (!t.init) {
if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
t.invoked = !0, t.methods = [ "identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on" ],
t.factory = function(e) {
return function() {
var n = Array.prototype.slice.call(arguments);
return n.unshift(e), t.push(n), t;
};
}, t.methods.forEach(function(e) {
t[e] = t.factory(e);
}), t.load = function(t) {
var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
var i = document.getElementsByTagName("script")[0];
i.parentNode.insertBefore(o, i);
};
}
}();
drift.SNIPPET_VERSION = '0.3.1';
drift.load('68uwg9zdxsyk');
</script>
<!-- End of Async Drift Code -->
</body>
</html>