SMS Conversation UI Using HTML CSS

SMS Conversation UI Using HTML CSS
Code Snippet:SMS Conversation Between Hoefler and Frere-Jones
Author: Joe Howard
Published: March 3, 2024
Last Updated: March 4, 2024
Downloads: 892
License: MIT
Edit Code online: View on CodePen
Read More

This HTML and CSS code snippet helps you to create a sleek SMS Conversation UI. The HTML organizes messages, while CSS styles the conversation. Perfect for adding a professional touch to your messaging applications. Easy to integrate and customize.

You can implement this code for stylish SMS interfaces in your web applications. Enhance user experience with a visually appealing chat layout.

How to Create SMS Conversation UI Using HTML CSS

1. First of all, load the Reset CSS by adding the following CDN link into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

2. Copy the following HTML code within the <ol class="chat"> element to structure your SMS conversation. Customize the messages by modifying the content within the <blockquote> tags.

<h6><em>Official document can be found here:  https://iapps.courts.state.ny.us/nyscef/ViewDocument?docIndex=TX7C8ZNf02N/UoHuOZf2gg==,</em></h6>
<h6><em> Jonathan Hoefler to Tobias Frere-Jones (Tobias in blue)</em></h6>
<h6><em>July 23, 2013 </em> 7:51 PM</h6>

<ol class="chat">
  
    <li class="them">
        <blockquote>You here?</blockquote>
        <br>
    </li>
    <li class="me">
        <blockquote>hey there</blockquote>
    </li>
    <li class="me">
        <blockquote>leaving in a bit though</blockquote>
    </li>
    <li class="them">
        <blockquote>np:</blockquote>
    </li>
    <li class="them">
        <blockquote>mind if we do 12:30 instead of 12:00 tomorrow?</blockquote>
    </li>
    <li class="me">
        <blockquote>that should be fine</blockquote>
    </li>
   <li class="them">
        <blockquote>thanks</blockquote>
    </li>
    <li class="them">
        <blockquote>2nd thing: I'm going to have some things for you on the Bigger Stake In The Company conversation.</blockquote>
    </li>
    <li class="them">
        <blockquote>
            If you don't mind, I think I'm going to type these up & send them to you for your perusal, rather than putting you on the spot at a lunch. That way you'll have time to digest, discuss & react.
        </blockquote>
    </li>

    <li class="them">
        <blockquote>
            I might need a few more days than expected, though: I am shooting for 7/31, but we're now in that Everyone You Need Is Out On Their Boat part of the year. I'll know more on Monday.
        </blockquote>
    </li>

    <li class="them">
        <blockquote>
            Is that ok?
        </blockquote>
    </li>

    <li class="me">
        <blockquote>
            so this is something i'd get tomorrow and discuss later? Sorry, can't tell which point in time is which.
        </blockquote>
    </li>

    <li class="them">
        <blockquote>
            I'm also heading out shortly btw.
        </blockquote>
    </li>

    <li class="them">
        <blockquote>
            no, sorry - I'm still putting everything together, and had hoped to have something to give you next week, but I'm waiting for a guy who I think is now away, (Or at least not returning calls, which is odd since I met with him last Tuesday.)
        </blockquote>
    </li>

    <li class="them">
        <blockquote>
            I'd like to get you something as soon as possibe, and then we can talk about it whenever you've had a chance to think about it.
        </blockquote>
    </li>

    <li class="me">
        <blockquote>
            Ok, I'm preparing thoughts and ideas over here, also with the 31st in mind
        </blockquote>
    </li>
</ol>

3. Now, copy the following CSS code into a separate stylesheet or include it within a <style> tag in your HTML file. This CSS provides a clean and modern look to your SMS conversation. You can customize colors and fonts to match your website’s theme.

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400+700);

.test {
  border-width: 0 10px;
  border-color: black;
  border-style: solid;
  height: 50px;
  border-radius: 10px/50%;
}

body { 
  font-family: "Open Sans", sanserif;
  margin: 2em;
}

.chat blockquote {
  line-height: 1.7;
  max-width: 75%;
  margin-bottom: 0.5ex;
  display: inline-block;
  padding: 0.5ex 1em;
  border-radius: 1.5ex/1em;
  position: relative;
  box-shadow: 0 15px 1px -12px rgba(0,0,0,0.05);
}
 ul, li{
   list-style: none;
}

.chat .them, .chat .me { margin-bottom: 1ex; }
.chat .them { text-align: left; }
.chat .me { text-align: right; }

blockquote:last-child::before {
  display:block;
  position: absolute;
  z-index: -999;
  border: 1ex solid transparent;
  bottom: 0;
  border-radius: 1em/1ex;  
}

.chat .them blockquote { background-color: #ccc; }
.chat .them blockquote:last-child::before {
  border-bottom-color: #ccc;
  border-right-color: #ccc;
  left: -0.8ex;
  content: "";
}

.chat .typing blockquote { 
  background-color: #ccc;
  font-weight: bold;
  color: #666;
}
.chat .typing blockquote:last-child::before {
  border-color: #ccc;
  border-width: 0.6ex;
  border-radius: 0.6ex;
  left: -0.2ex;
  box-shadow: -1.1ex 0.3ex 0 -0.3ex #ccc;
  content: "";
}


.chat .me blockquote {
  background-color: #007AFF;
  background-image: linear-gradient(180deg,#007AFF,#1D62F0);
  color: white;
}

.chat .me blockquote:last-child::before {
  content: "";
  right: -0.8ex;
  border-bottom-color: #1D62F0;  
  border-left-color: #1D62F0;
}

h6 {
  font-size: .7em;
  text-align: center;
  margin: 1em 0;
  color: #ccc;
}

h6 em { font-weight: bold; }

Feel free to customize the code further to suit your specific needs, such as changing colors, fonts, or adjusting the layout. Enjoy implementing this SMS Conversation UI effortlessly!

That’s all! hopefully, you have successfully integrated this SMS Conversation UI into your web/app project. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X